翻转 svg 坐标系

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

49941 次浏览
小开

是的，坐标旋转 -90，然后平移 + 你的新数字的高度应该可以做到。在 W3C有一个例子。

小开
最佳答案

我做了很多实验，唯一符合逻辑的方法是:

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

其中400是图像的高度。它是怎么做的呢? 它把所有东西都向下移动，使得图像的顶部现在是图像的底部，然后缩放操作翻转 Y 坐标，使得现在离开页面/图像的位被翻转回来，以填充留下的空间。

小开

我知道这是旧的，但我正在做同样的事情，尝试@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放在20，从 svg的左下角20，参见 http://jsfiddle.net/DUVGz/

小开

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

转换 = “ trans (180.1,0,0)”

小开

我找到的最好的笛卡儿坐标系组合非常简单:

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>

这将通过 cssscaleY(-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

小开

另一种方法是使用 D3v4线性创建一个函数来为您进行交换。

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

参见 通过汤力水的可运行代码

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

也相当于

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

我通常所做的是把坐标画在笛卡尔平面上 y 轴的负值上。然后通过将 y 轴的负值替换为正值来传递坐标。


提交答案