翻转svg坐标系

有没有办法翻转SVG坐标系，使[0,0]位于左下方而不是左上方？

我做了很多实验，唯一合乎逻辑的方法如下： 

<g transform="translate(0,400)"> <g transform="scale(1,-1)">

其中400是图像的高度。 这是什么，它将所有的东西都移动到图像的顶部，并且是图像的底部，然后缩放操作翻转Y坐标，这样现在离开页面/图像的位就被翻转回来填充留下的空间。

我知道这是旧的，但我做了同样的事情，尝试@Nippysaurus版本，但这是太烦人，因为一切都将被旋转（所以如果你把图像，你将不得不把它们旋转回来）。 还有另一个解决scheme

我所做的仅仅是移动svg的viewBox，并将y轴上的所有坐标反转（并将对象的高度也移除到其左下angular），如下所示： 

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300" viewBox="0 -300 200 300"> <rect x="20" y="-40" width="20" height="20" stroke="black" stroke-width="1px"></rect> </svg>

这将从svg左下angularsvg ，看到http://jsfiddle.net/DUVGz/

是的，一个坐标旋转-90，然后翻译+你的新数字的高度应该这样做。 W3C有一个例子。

我发现转换成笛卡儿坐标系的最好的组合是：

CSS 

 svg.cartesian { display:flex; } svg.cartesian > g { transform: scaleY(-1); } svg.cartesian > g text { transform: scaleY(-1); } 
 <html> <head></head> <body> <svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"> <g> <path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" /> <path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" /> <g transform="translate(20, 20)"> <circle r="1" /> <text>(20, 20)</text> </g> <g transform="translate(-50, -35)"> <circle r="0.5" /> <text>(-50, -35)</text> </g> </g> </svg> </body> </html> 
 <g transform="translate(0,400) scale(1,-1)">

这也相当于下面 

 <g transform="scale(1,-1) translate(0,-400) ">

如果您不知道svg的大小，则可以对整个SVG元素使用CSS转换： 

 #parrot { transform-origin: 50% 50%; /* center of rotation is set to the center of the element */ transform: scale(1,-1); }

积分： https ： //sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css

另一种方法是使用D3 v4 scaleLinear创build一个函数来为你做交换。 

 import * as d3 from "d3"; ... // Set the height to the actual value to where you want to shift the coords. // Most likely based on the size of the element it is contained within let height = 1; let y = d3.scaleLinear() .domain([0,1]) .range([height,0]); console.log("0 = " + y(0)); // = 1 console.log("0.5 = " + y(0.5)); // = 0.5 console.log("1 = " + y(1)); // = 0 console.log("100 = " + y(100)); // = -99 console.log("-100 = " + y(-100)); // = 101

通过补药查看可运行的代码

我认为180度旋转元素的最简单方法是旋转180.1度;

变换= “翻译（180.1,0,0）”

Interesting Posts