SVG viewBox反转Y坐标 [英] SVG viewBox reversing Y-coordinates

问题描述

我正在使用SVG在HTML页面中绘制不同的形状.这些不同的形状是从Microsoft Sql Server中的空间数据库的几何对象中检索到的.我面临的问题是坐标系统(Svg和Microsoft Sql Server)不同. 0,0从Svg左上角开始，而在Microsoft Sql Server中，它从左下角开始.我只需要反转Y坐标.我还使用viewBox正确显示数据(用于不同的转换).有什么方法可以解决我的问题，而无需触碰对象的坐标并仅使用我的视图框的属性?我动态创建对象，并且希望使用"viewBox"解决方案.

I'm using SVG to draw in a HTML page different shapes. These different shapes are retrieved from geometry objects of a spatial database in Microsoft Sql Server. The problem I'm facing is that the system of coords (Svg and Microsoft Sql Server) is different. 0,0 begins in Svg on the top left corner, whereas in Microsoft Sql Server it starts at the bottom left corner. I need to reverse just the Y coords. I'm also using viewBox to display the data properly (for different transformations). Is there any way to solve my problem without touching the coords of the object and working just with the attributes of my viewbox? I create the objects dynamically and would prefer a "viewBox" solution.

提前谢谢！

推荐答案

我认为您不能使用viewBox. SVG规范指出，如果要定义新的坐标系，则必须使用变换.您想要的是反射穿过图像中心的一条水平线的所有内容.为此，将您的所有元素包装在一个组中，如下所示:

I don't think you can use viewBox. The SVG specifications say that if you want to define a new coordinate system then you have to use a transformation. What you want is to reflect everything about a horizontal line through the centre of the image. For that, wrap all your elements in a group like so:

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

其中height是SVG的高度.一个潜在的问题是文本将被颠倒显示.

Where height is the height of your SVG. One potential problem is that text will be rendered upside down.

这篇关于SVG viewBox反转Y坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！