如何定位此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路径位置

节日快乐

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>

在这里摆弄

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>