移动 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="auto"

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

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