html - 翻转 SVG 箭头并使其指向正确？

Question

我有一个路径元素与一个标记元素相结合，以在 SVG 中创建一个箭头。但是，我的当前箭头指向左边，但我需要注意指向右边。我已经对路径的 d 属性做了很多尝试，但我不知道如何翻转它。

所以这是箭头的 HTML:

<defs>
    <marker id="arrow-5" orient="auto" markerWidth="10" markerHeight="10" refX="1" refY="4">
        <path d="M0,0 L0,8 L8,4 z" fill="#5a5a5a"></path>
    </marker>
</defs>

然后画出这样的箭头:

那么翻转这个箭头并使其指向另一个方向的方法是什么？

Answer 1

标记被定义为使其正 X 轴旋转以指向路径行进的方向。

您的原始标记设计得很好 - 它指向正确的方向。所以这意味着你图片中的路径必须从右到左，你正在使用 marker-start="url(#arrow-5)" 将箭头放在图片的右手端你的道路。

暂时翻转标记可能没问题，但您已将所有内容放回到前面。这对您来说可能没问题，但以后可能会引起头痛。

更好的解决方案是翻转你的路径，而不是你的标记。

<svg width="400" height="300">
  <defs>
    <marker id="arrow-5" orient="auto" markerWidth="10" markerHeight="10" refX="1" refY="4">
        <path d="M0,0 L0,8 L8,4 z" fill="#5a5a5a"></path>
    </marker>
  </defs>
  
  <path d="M 25,100 L 350,200" fill="none" stroke="#5a5a5a" stroke-width="4" marker-end="url(#arrow-5)"/>
</svg>