我是动画的初学者。我正在尝试从以下代码学习svg动画。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;">
<animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
我想移动箭头以相反的方向(即逆时针)旋转,但无法实现。我已尝试更改路径,但此时此刻我被困住了。 任何帮助将不胜感激。
答案 0 :(得分:1)
我们可以使用keyTimes和keyPoints向后运行动画,并更改变换以旋转箭头。查看关键点如何从1变为0。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(90)" style="fill: #ff0000;">
<animateMotion keyPoints="1;0" keyTimes="0;1" path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>