如何将SVG路径定位到原点0,0在右下角？

Question

我有以下路径：

<svg class="svg" height="100%" width="100%">
  <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

0,0 指的是 SVG 的左上角。如何使它指向右下角，这样三角形就始终在 SVG（及其父级 div）的右下角？

以下问题问了类似的问题，但没有人回答：Svg path position

节日快乐！

- Joe Isaacson

Answer 1

首先，如果您想要一致的渲染效果，您的SVG需要具有viewBox。

例如：

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

您没有准确描述当移动原点时文档应该如何表现。

如果您只想将原点移至右下角，则可以使用一个组元素来包含您的内容，并将坐标空间移动到600,600。

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="translate(600 600)">
       <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

但这意味着你的三角形会偏离屏幕的右下角，因此你需要相应地调整所有三角形坐标。

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="translate(600 600)">
       <polygon points="-200,-200 0,-200 -100,-100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

点击此处查看示例

然而，如果您想要翻转整个坐标空间，以便原点位于右下角，正坐标空间向上和向左 - 实际上只是将文档旋转180度 - 您可以使用以下代码：

<svg class="svg" height="100%" width="100%" viewBox="0 0 600 600">
    <g transform="rotate(180 300 300)">
       <polygon points="0,0 200,0 100,100" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
</svg>

Fiddle here

- Paul LeBeau

Answer 2

因此，答案是编辑“保留纵横比”以使其与xmax（右侧）和ymin（底部）对齐，以使右下角定位。

以下是代码

<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMaxYMin meet"> 
   <g>
     <polygon points="0,100 0,90 100,100" style="fill:yellow;" />
   </g> 
</svg>

- Joe Isaacson

---

将 preserveAspectRatio 设置为 "xMaxYMax meet" 对我很有帮助。 - Tamik Soziev

Answer 3

除了使用JavaScript，这似乎是可用的最佳选择。

SVG中的右对齐坐标

- cmonkey

---

似乎可以工作。谢谢。有没有想法为什么如果设置为100%，SVG不会拉伸到父div的宽度？ - Joe Isaacson

不确定。或许值得设置一个 jsfiddle 或其他示例。 - cmonkey