尝试旋转 SVG 动画时遇到问题答案

【问题标题】：Facing problem while trying trying to rotate SVG animation尝试旋转 SVG 动画时遇到问题
【发布时间】：2020-11-04 20:18:12
【问题描述】：

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

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

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：

箭头也可以旋转吗？
箭头指向它运动的相反方向...是否可以沿运动方向旋转它。
实际上这似乎是一个 Chrome 错误。在 Firefox 中尝试它可以正常工作。
是的，它在 Firefox 中运行良好，所以他们对 Chrome 有任何解决方法
不知道。您可以随时将错误报告给Chrome's bugtracker。如果你知道怎么做，你甚至可以下载源代码并修复它。