html - 尝试旋转 SVG 动画时遇到问题

Question

我是动画初学者。我正在尝试从以下代码中学习 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>

我想移动箭头以向相反方向(即逆时针方向)旋转，但无法实现。我试图改变路径，但我被困在这一点上。任何帮助将不胜感激。

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