SVG animation - rotation and transformation problem

问题

I need your help. I have a question regarding to svg animation. I would like to apply animation to red arrows (find me here) and achieve 3 things

Each arrow should move on the path designated by given square
When arrow reaches square corner it should rotate 90 deg (towards direction of the animation)
As you can see there is a gap on each side of square. Arrow should not appear in this gap space. When the arrow reaches a gap it should gradually start to appear on the other side of the gap as it disappears from the current side.

I know how to solve problem described in point 1. I wrote javascript program that is applying animateMotion element to each arrow and set path attribute. Arrows are animating. As for problem 2 I tried setting rotate attribute to auto but it was not working.
This is my first time asking something on stack overflow so please forgive me if I am missing something.

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

回答1:

Is this what you were looking for?

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

来源：https://stackoverflow.com/questions/52119524/svg-animation-rotation-and-transformation-problem

标签

javascript

css

animation

svg

svg-animate