如何在svg动画中沿路径旋转图像？

Question

我有一个沿着一条路径动画的图像。

我希望它能让图像自动旋转到路边但保持在路径的顶部。

有什么想法吗？

＆＃13;

＆＃13;

<svg id="da" width="800" height="600" viewBox="0 0 800 600">
    <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
        d="M 814.00,140.00
           C 814.00,140.00 664.00,112.50 632.50,106.50
             601.50,102.50 534.00,95.50 509.00,94.50
             484.00,93.50 417.00,92.00 374.00,94.00
             334.00,98.00 298.00,96.00 242.00,104.00
             186.00,112.00 167.00,118.00 150.00,122.00
             134.48,127.70 90.95,139.46 99.00,156.50
             109.00,173.50 166.00,210.00 201.00,232.00
             236.00,254.00 719.50,587.00 757.50,608.00"/>

    <filter id="horse_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="https://massinflux.com/1.png"/>
    </filter>
    <circle id="circle" filter="url(#horse_image)" cx="0" cy="0" r="20"/>

    <animateMotion
            rotate="auto-reverse"
            xlink:href="#circle"
            dur="10s"
            begin="0s"
            fill="freeze"
            repeatCount="indefinite">
        <mpath xlink:href="#motionPath"/>
    </animateMotion>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要将你的路径分成两个部分（即一个用于顶部，一个用于转弯后的第二个部分），以使其在折叠时保持在顶部。

或者你可以完全关闭自动旋转，因此它保持直立（见下文）。

＆＃13;

＆＃13;

<svg id="da" width="800" height="600" viewBox="0 0 800 600">
    <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
        d="M 814.00,140.00
           C 814.00,140.00 664.00,112.50 632.50,106.50
             601.50,102.50 534.00,95.50 509.00,94.50
             484.00,93.50 417.00,92.00 374.00,94.00
             334.00,98.00 298.00,96.00 242.00,104.00
             186.00,112.00 167.00,118.00 150.00,122.00
             134.48,127.70 90.95,139.46 99.00,156.50
             109.00,173.50 166.00,210.00 201.00,232.00
             236.00,254.00 719.50,587.00 757.50,608.00"/>

    <filter id="horse_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="https://massinflux.com/1.png"/>
    </filter>
    <circle id="circle" filter="url(#horse_image)" cx="0" cy="0" r="20"/>

    <animateMotion
            rotate="0"
            xlink:href="#circle"
            dur="10s"
            begin="0s"
            fill="freeze"
            repeatCount="indefinite">
        <mpath xlink:href="#motionPath"/>
    </animateMotion>
</svg>

＆＃13;

＆＃13;

＆＃13;