SVG viewBox反轉Y座標

Question

我使用SVG在HTML頁面中繪製不同的形狀。這些不同的形狀從Microsoft Sql Server中的空間數據庫的幾何對象中檢索。我面臨的問題是Coord（Svg和Microsoft Sql Server）的系統是不同的。 0,0從左上角的Svg開始，而在Microsoft Sql Server中，它從左下角開始。我需要扭轉Y座標。我也使用viewBox正確顯示數據（用於不同的轉換）。有沒有辦法解決我的問題，而不觸及對象的座標並僅僅使用我的viewbox的屬性？我動態地創建對象並且更喜歡「viewBox」解決方案。

在此先感謝！

Answer 1

我不認爲你可以使用viewBox。 SVG規範說，如果你想定義一個新的座標系，那麼你必須使用一個轉換。你想要的是反映關於通過圖像中心的水平線的一切。爲此，包組中的所有您的元素，像這樣：

<svg> 
    <g transform="matrix(1 0 0 -1 0 height)"> 
    all the other elements... 
    </g> 
</svg> 

哪裏height是你的SVG的高度。一個潛在的問題是文本會被顛倒。