Question

我需要你的帮助。我对svg动画有疑问。我想将动画应用于红色箭头（find me here）并实现3件事

每个箭头应在给定正方形指定的路径上移动
当箭头到达方形角时，它应旋转90度（朝动画方向）
如您所见，正方形的每一侧都有一个缝隙。箭头不应出现在此间隙空间中。当箭头到达间隙时，它应逐渐从间隙的另一侧开始出现，因为它将从当前侧消失。

我知道如何解决第1点中描述的问题。我编写了一个JavaScript程序，该程序将animateMotion元素应用于每个箭头并设置了path属性。箭头在动画。至于问题2，我尝试将Rotate属性设置为auto，但没有用。
这是我第一次询问堆栈溢出问题，因此，如果我缺少某些内容，请原谅我。

<html>
<head>
    <meta charset="utf-8"/>
</head>

<body>

  <figure>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 50 200 200">

          <title>Layer 1</title>
          <line fill="none" stroke="#000000" x1="70" x2="90" y1="85" y2="85"/>
          <line fill="none" stroke="#000000" x1="105" x2="125" y1="85" y2="85"/>
          <line fill="none" stroke="#000000" x1="125" x2="125" y1="85" y2="105"/>
          <line fill="none" stroke="#000000" x1="125" x2="125" y1="120" y2="140"/>
          <line fill="none" stroke="#000000" x1="70" x2="90" y1="140" y2="140"/>
          <line fill="none" stroke="#000000" x1="105" x2="125" y1="140" y2="140"/>
          <line fill="none" stroke="#000000" x1="70" x2="70" y1="85" y2="105"/>
          <line fill="none" stroke="#000000" x1="70" x2="70" y1="120" y2="140"/>

          <path d="m79.755233,84.987506l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0"/>
          <path d="m112.755233,84.987503l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0"/>
          <path d="m125.265789,92.87705l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(90 124.988 92.877)"/>
          <path d="m125.265736,127.166662l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(90 124.988 127.167)"/>
          <path d="m114.755231,139.986834l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(180 114.477 139.987)"/>
          <path d="m79.755231,139.987503l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(180 79.477 139.988)"/>
          <path d="m70.266077,127.476654l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(-90 69.9878 127.477)"/>
          <path d="m70.26573,93.476997l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(-90 69.9875 93.477)"/>
        </svg>
    </figure>

</body>
</html>`

Answer 1

这是您要找的吗？

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

SVG动画-旋转和变形问题

1 个答案: