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

Question

我有一个path元素和一个marker元素组合在一起，在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)"将箭头放置在路径的右端。

现在翻转标记可能还行，但是你已经把所有的东西都颠倒过来了。这对你来说可能没问题，但以后可能会让你头疼。

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

​

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

​