Анимация внешнего вида полилинии с использованием SVG animate - PullRequest
Новая
       16

Анимация внешнего вида полилинии с использованием SVG animate

3 голосов
/ 27 января 2012

Я работаю с SVG в HTML, чтобы определить конкретные фигуры с помощью инструмента ломаной линии.Я пытаюсь оживить вид определенной формы в другую форму одним нажатием кнопки и в течение нескольких секунд.

Я пытался использовать инструмент анимации для изменения атрибута точек полилинии, нодо сих пор не удалось найти решение или что-то, что работает идеально.

Возможно ли это сделать?Если нет, есть ли жизнеспособная альтернатива?

1 Ответ

9 голосов
/ 28 января 2012

Вы можете поставить полилинии (и даже пути с кривыми Безье и т. Д.) Для анимации движения, если они имеют одинаковое количество точек, поскольку SVG просто перемещает каждую (контрольную) точку независимо. Если фигуры не имеют одинакового количества контрольных точек, вы можете просто совпасть с некоторыми, но я думаю, что графические редакторы это «исправят». 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm"  viewBox="0 0 1000 1000"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline stroke="red" stroke-width="3" fill="none">
  <animate attributeName="points" dur="5s" repeatCount="indefinite"
    from="100,100 900,100 900,900 100,900 100,100"
      to="200,200 800,500 800,500 200,800 200,200"
  />
</polyline>
</svg>
...