SVG viewBox reversing Y-coordinates

问题

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.

Thanks in advance!

回答1:

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>

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

来源：https://stackoverflow.com/questions/6436579/svg-viewbox-reversing-y-coordinates