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

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

Moving SVG arrowhead needs correct orientation

animation

svg

path

orientation

marker