Блог

Главная - Вопросы по программированию - Проблема при попытке повернуть анимацию SVG

Проблема при попытке повернуть анимацию SVG

#html #css #svg

#HTML #css #svg

Вопрос:

Я новичок в анимации. Я пытаюсь изучить анимацию 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>

Я пытаюсь переместить стрелку для поворота в противоположном направлении (т.Е. против часовой стрелки), но не могу этого добиться. Я пытался изменить путь, но я застрял на этом этапе.
Любая помощь будет оценена.

Ответ №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>

Комментарии:

1. Возможно ли также повернуть стрелку?

2. Стрелка указывает на противоположное направление ее движения… Возможно ли повернуть его в направлении движения.

3. На самом деле это, похоже, ошибка Chrome. Попробуйте это в Firefox, где это работает правильно.

4. Да, он отлично работает в Firefox, так же как и их обходной путь для Chrome

5. Понятия не имею. Вы всегда можете сообщить об ошибке в bugtracker Chrome . Вы даже можете загрузить исходный код и исправить его, если сможете выяснить, как это сделать.