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

我有一个路径元素结合一个标记元素在SVG中创建一个箭头。不过，我现在的箭头点了，但我需要头脑正确。我已经玩了很多关于路径的d属性，但我无法弄清楚如何翻转它。翻转SVG箭头并使其指向正确？

所以这是箭头的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>

并由此得出这样一个箭头：

那么这将是翻转这个箭头，使得它的方式指向另一个方向？

帮助将不胜感激。

来源

2017-07-24 Aborted

你必须把这个：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，但没关系。这个坐标交换应该做。

来源

2017-07-24 13:24:57 GottZ

非常感谢您的帮助！我无法完全描述我的情况：我绘制的路径是动态的，只需要反方向的箭头。您的解决方案100％工作！ – Aborted

@仔细看看Paul LeBeau的回答。他提到了我的基本意思 – GottZ

标记被定义为使得它们的正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>

来源

2017-07-25 03:22:34

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

回答

相关问题