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的高度。一个潜在的问题是文本会被颠倒。