在 SVG 多边形的一侧放置边框的最简洁方法？

Question

<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100"></polygon>
</svg>

是否可以在不使用 JavaScript 的情况下仅在此形状的右侧放置边框？

Answer 1

也许影子可以？

<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100" style="filter: drop-shadow(1px 0px 0px black)"></polygon>
</svg>

Answer 2

使用适当的stroke-dasharray

<svg width="600px" height="600px" fill="blue" viewBox="0 0 101 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100" stroke="red" pathLength="100" stroke-dasharray="0 15.4 34.6 100"></polygon>
</svg>

在 SVG 多边形的一侧放置边框的最简洁方法？

Cleanest way to put a border on one side of SVG polygon?

svg

polygon