SVG viewBox反转Y坐标

Question

我正在使用SVG在HTML页面中绘制不同的形状。从Microsoft Sql Server中的空间数据库的几何对象检索这些不同的形状。我面临的问题是coords系统（Svg和Microsoft Sql Server）是不同的。 0,0从左上角的Svg开始，而在Microsoft Sql Server中，它从左下角开始。我需要扭转Y型坐标。我也使用viewBox正确显示数据（用于不同的转换）。有没有办法解决我的问题而不触及对象的坐标并只使用我的视图框的属性？我动态创建对象，更喜欢“viewBox”解决方案。

提前致谢！

Answer 1

我认为你不能使用viewBox。 SVG规范说如果要定义新的坐标系，则必须使用转换。你想要的是反映通过图像中心的水平线的一切。为此，将所有元素包装在一个组中，如下所示：

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

height是SVG的高度。一个潜在的问题是文本将被颠倒。