SVG视口反转Y坐标

Question

我正在使用SVG在HTML页面上绘制不同的形状。这些不同的形状是从Microsoft Sql Server的空间数据库的几何对象中检索出来的。我面临的问题是坐标系统（Svg和Microsoft Sql Server）不同。0,0在Svg中从左上角开始，而在Microsoft Sql Server中它从左下角开始。我只需要反转Y坐标。我还使用viewBox以正确显示数据（用于不同的转换）。有没有办法在不触摸对象坐标的情况下，仅通过我的viewBox属性解决我的问题？我动态创建对象，希望得到“viewBox”解决方案。

提前感谢！

- user779625

Answer 1

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

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

height是您的SVG的高度。一个潜在的问题是，文字将被倒置渲染。

- Peter Collingridge

Answer 2

我曾经遇到过类似的问题，通过将CSS应用于整个svg元素来解决：

<svg width="400" height="250" viewbox="0 0 400 250">
  <style type="text/css">
  svg {
    transform: scaleY(-1);
  }
  </style>
</svg>

- mati.o