SVG 动画 - 旋转和变换问题答案

【问题标题】：SVG animation - rotation and transformation problemSVG 动画 - 旋转和变换问题
【发布时间】：2019-02-06 17:26:20
【问题描述】：

我需要你的帮助。我有一个关于 svg 动画的问题。我想将动画应用于红色箭头 (find me here) 并实现 3 件事

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

我知道如何解决第 1 点中描述的问题。我编写了将animateMotion 元素应用于每个箭头并设置path 属性的javascript 程序。箭头动画。至于问题 2，我尝试将旋转属性设置为 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>`

【问题讨论】：

你写的JS在哪里。这是演示所必需的。
SMIL 是一个选项，还是您尝试完全在 js/css 中执行此操作？
请在此处使用 javascript updated 找到更新的代码。 SMIL 可以是一个选项，因为我正在尝试寻找任何解决方案。谢谢
@Paulie_D 请在上面找到我的答案
@ChrisW。请在上面找到我的答案

标签： javascript css animation svg svg-animate

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

【讨论】：

这几乎就是我想要的。当箭头击中间隙时，我想改进这部分。之后箭头应逐渐消失在间隙的一侧，并立即出现在间隙的另一侧。现在箭头在白色面具下移动，但它不是“变换”