移动SVG箭头需要正确的方向

Question

我正在寻找一种方法来正确定位已设置动画的箭头，使其沿着定义的路径移动(在本例中为贝塞尔曲线(。在这种情况下，箭头必须在开始时指向下方，在结束时指向上方。这是为了向用户展示对象是如何从一端流到另一端的。我已经完成了一半，但需要帮助来更正下面给出的代码。正确的方向显示在SVG的静态部分。如有任何帮助，我们将不胜感激。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 140">
<path d="M10,10 C15,50 95,50 100,10" stroke="blue" stroke-width="2" fill="none" id="wire" />
<!-- acceptable movement along the path but incorrect orientation -->
<polygon points="0,0 10,5 0,10 3,5" fill="red">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
<!-- Correctly oriented -->
<defs>
<marker viewBox="0 0 10 10" refX="3" refY="5" id="redArrowhead" orient="auto">
<polygon points="0,0 10,5 0,10 3,5" fill="red" />
</marker>
</defs>
<g stroke="blue" stroke-width="2" fill="none" transform="translate(0,30)">
<path d="M10,10 C15,50 95,50 100,10" marker-start="url(#redArrowhead)" marker-end="url(#redArrowhead)" />
</g>
</svg>

Answer 1

您只需要添加rotate="自动；

我还添加了一个平移变换，以保持箭头在线上。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 140">
<path d="M10,10 C15,50 95,50 100,10" stroke="blue" stroke-width="2" fill="none" id="wire" />
<!-- acceptable movement along the path but incorrect orientation -->
<polygon transform="translate(0,-6)" points="0,0 10,5 0,10 3,5" fill="red">
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#wire" />
</animateMotion>
</polygon>
<!-- Correctly oriented -->
<defs>
<marker viewBox="0 0 10 10" refX="3" refY="5" id="redArrowhead" orient="auto">
<polygon points="0,0 10,5 0,10 3,5" fill="red" />
</marker>
</defs>
<g stroke="blue" stroke-width="2" fill="none" transform="translate(0,30)">
<path d="M10,10 C15,50 95,50 100,10" marker-start="url(#redArrowhead)" marker-end="url(#redArrowhead)" />
</g>
</svg>