Nip*_*rus 72
我做了很多实验,唯一合理的方法如下:
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
其中400是图像的高度.这样做会将所有内容向下移动,以便图像的顶部现在和图像的底部,然后缩放操作翻转Y坐标,以便现在离开页面/图像的位被翻转回来填充留下的空间.
cch*_*ain 13
我发现转换为笛卡尔坐标系的最佳组合非常简单:
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).
Gui*_*ume 10
我知道这是旧的,但是我做了同样的事情,试过@Nippysaurus版本,但这太烦人了,因为一切都会被旋转(所以如果你放图像,你将不得不将它们旋转回来).还有另一个解决方案
我所做的只是移动视图框svg并反转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/
如果您不知道 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