翻转svg坐标系

时间:2010-10-02 13:50:36

标签: svg coordinate-systems cartesian

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

9 个答案:

答案 0 :(得分:72)

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

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

其中400是图像的高度。这样做会将所有内容向下移动,以便图像的顶部现在和图像的底部,然后缩放操作翻转Y坐标,以便现在离开页面/图像的位被翻转回来填充留下的空间。

答案 1 :(得分:10)

我知道这已经老了,但是我做了同样的事情,尝试了@Nippysaurus版本,但这太烦人了,因为所有东西都会被旋转(所以如果放图像,你就必须将它们旋转回来)。还有另一个解决方案

我所做的只是移动svg的viewBox并反转y轴上的所有坐标(并删除对象的高度也位于其左下角),如:

<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>

这会将rect放在svg左下角的20,20,见http://jsfiddle.net/DUVGz/

答案 2 :(得分:10)

我发现转换为笛卡尔坐标系的最佳组合非常简单:

<强> 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>
    <!-- SVG Start -->

    <!-- Vertical / Horizontal Axis -->
    <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" />
    
    <!-- Plotting -->
    <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>

    <!-- SVG End -->
  </g>
  </svg>
    </body>
  </html>

这会通过css scaleY(-1)自动解除页面上的所有文字元素。

答案 3 :(得分:4)

是的,坐标旋转-90后跟+新图形高度的平移应该这样做。 W3C有一个例子。

答案 4 :(得分:3)

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

也等同于

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

答案 5 :(得分:1)

如果你不知道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

答案 6 :(得分:-1)

另一种方法是使用D3 v4 scaleLinear来创建一个可以为您进行交换的函数。

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

请参阅runable code via tonic

答案 7 :(得分:-2)

我通常做的是在笛卡尔平面上绘制/放置坐标在 y 轴的负值处。稍后通过将y轴的负值替换为正值来传递坐标。

答案 8 :(得分:-5)

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

变换=&#34;翻译(180.1,0,0)&#34;