Как создать анимацию SVG

Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG. Итак, мы уже многое знаем об SVG. Мы можем рисовать какие-то объекты в SVG, стилизовать их и писать текст, но есть ещё одна классная вещь - анимация. Вот о том, как анимировать SVG объекты, мы и поговорим в этой статье.

<svg>
  <rect x="0" y="0" width="150" height="150" fill="#0f0">
   <animate attributeName="width" from="0" to="150" dur="5s" />
  </rect>
</svg>

Для анимации служит тег animate. Атрибут attributeName принимает название того атрибута, который мы будем анимировать, from и to, собственно, начальное и конечное значение, а в dur мы указываем сколько секунд будет длиться анимация.

Также мы можем анимировать положение объекта на странице. Как вы помните, атрибут x и y указываем положение по оси x и по оси y. Вот, чтобы передвинуть объект, мы будем анимировать эти атрибуты

		Это интересно 0	Как всё будет выглядеть в блоге: Как создать анимацию SVG Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13270204/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Как создать анимацию SVG </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG </div> </div> Как создать анимацию SVG <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchimsya-rabotat-v-kompyuternyih-programmah/13270204/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Как создать анимацию SVG</a> <div style="font-family:trebuchet MS;">Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG </div> </div>

webguru

20.02.2017

В избранное Пожаловаться Просмотров: 1023

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

Учимся работать в компьютерных программах 1086

Последние откомментированные темы:

Как создать анимацию SVG

Комментарии временно отключены

Открытая группа
54222 участника