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

节日快乐

Answer 1

所以答案是编辑perserve aspect ration以使其与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>

Answer 2

首先，如果你想要一致的渲染，你的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>

Fiddle here

但是，如果你真的想要反转整个坐标空间，使原点位于右下角，正坐标空间向上，向左 - 这实际上只是旋转文档180deg - 你可以使用：

<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

Answer 3

除了使用javascript之外，这似乎是最好的选择。

Right aligned coordinates in SVG

如何定位此SVG路径以使原点0,0位于右下角？

3 个答案: