翻转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

您必须将此M0,0 L0,8 L8,4 z转换为此M8,0 L8,8 L0,4 z

只是让你知道为什么这有效：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

基本上这是一组坐标。我只是在x轴上交换它

但老实说，我很想知道。如果它像你描述的那样，箭头应该已经转过来了。也许矢量刚刚旋转，你正在向后绘制那条线。如果没有看到整个svg，我肯定不知道，但这并不重要。这个坐标交换应该做。

Answer 2

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

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

翻转标记现在可能正常工作，但是你可以将所有内容都放回原处。这可能对你没问题，但以后可能会引起头痛。

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;