79

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

4

9 回答 9

82

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

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

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

于 2010-10-03T09:04:54.253 回答
36

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

css

svg.cartesian {
  display:flex;
}

/* Flip the vertical axis in <g> to emulate cartesian. */
svg.cartesian > g {
  transform: scaleY(-1);
}

/* Re-flip all <text> element descendants to their original side up. */
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: Can be removed if you don't want x/y axes. -->
    <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: This is an example plotting two points at (20, 20) and (-50, -35), replace it with your data. -->
    <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)。

于 2016-08-07T06:20:39.623 回答
14

我知道这很旧，但我也在做同样的事情，尝试了@Nippysaurus 版本，但这太烦人了，因为所有东西都会被旋转（所以如果你放图像，你必须把它们旋转回来）。不过还有另一种解决方案

我所做的只是移动 viewBoxsvg并反转 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左下角放置 20,20 svg，请参阅http://jsfiddle.net/DUVGz/

于 2013-09-20T15:52:48.447 回答
4

是的，坐标旋转-90，然后平移+新图形的高度就可以了。W3C有一个例子。

于 2010-10-02T14:01:39.163 回答
4

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

于 2016-08-07T11:27:49.110 回答
3 
<g transform="translate(0,400) scale(1,-1)">

这也相当于下面

<g transform="scale(1,-1) translate(0,-400) ">
于 2017-06-20T02:23:25.440 回答
0

另一种方法是使用 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

通过 tonic查看可运行代码

于 2016-08-10T05:10:28.323 回答
-2

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

于 2021-02-01T17:32:57.043 回答
-7

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

变换="翻译(180.1,0,0)"

于 2014-11-24T14:05:32.317 回答