SVG анимация - проблема вращения и трансформации - PullRequest
Новая
       9

SVG анимация - проблема вращения и трансформации

0 голосов
/ 31 августа 2018

Мне нужна твоя помощь. У меня есть вопрос, касающийся SVG анимации. Я хотел бы применить анимацию к красным стрелкам ( найди меня здесь ) и достичь 3 вещей

  1. Каждая стрелка должна двигаться по пути, обозначенному данным квадратом
  2. Когда стрелка достигает квадратного угла, она должна повернуться на 90 градусов (в направлении анимации)
  3. Как видите, с каждой стороны квадрата есть промежуток. Стрелка не должна появляться в этом промежутке. Когда стрелка достигает зазора, она должна постепенно появляться на другой стороне зазора, поскольку она исчезает с текущей стороны.

Я знаю, как решить проблему, описанную в пункте 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>`

1 Ответ

0 голосов
/ 31 августа 2018

Это то, что вы искали? 

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