XML

Цель работы

Научиться применять анимацию к различным свойствам SVG-фигур, создавать анимацию трансформаций.

Задания

Задание 1

Напишите код следующих анимаций для любого примитива (круг, прямоугольник):
- перемещение по прямой;
- изменение размера (радиуса);
- изменение цвета при одновременном перемещении по оси X;
- изменение толщины обводки.

Решение

SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <rect height="80" y="12" transform="skewX(-40)" stroke="red" fill-opacity=".4" stroke-opacity=".2">
       <animate attributeName="x" from="100" to="700" dur="3s" repeatCount="indefinite"/>
       <animate attributeName="width" from="130" to="220" dur="3s" repeatCount="indefinite"/>
       <animate attributeName="fill" from="coral" to="yellow" dur="3s" repeatCount="indefinite"/>
       <animate attributeName="stroke-width" from="3" to="15" dur="3s" repeatCount="indefinite"/>
   </rect>
</svg>

Задание 2

Примените анимацию трансформации для изменения размеров любого SVG-контура из предыдущей работы.

Решение

SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
        .fill-1{
            fill: coral
        }
    </style>
                                
    <defs>
        <path id="bubble" d="M50 6.25c27.614 0 50 18.188 50 40.625 0 22.437-22.386 
        40.625-50 40.625-2.652 0-5.255-0.169-7.795-0.493-10.74 10.74-23.56 12.666-35.955 
        12.949v-2.629c6.693-3.279 12.5-9.252 12.5-16.078 0-0.953-0.074-1.888-0.211-2.802-
        11.308-7.448-18.539-18.824-18.539-31.573 0-22.437 22.386-40.625 50-40.625z"/>
    </defs>
                                
    <use href="#bubble" class="fill-1" x="0" y="10">
        <animateTransform attributeName="transform" attributeType="XML" 
            type="scale" from="1" to="1.7" dur="2s" repeatCount="indefinite"/>
    </use>
</svg>

Задание 3

Добавьте обработку событий в любую из созданных ранее анимациий. Для эффекта постепенной прорисовки необходимо установить свойства stroke-dasharray (длина штриха) и stroke-dashoffset (сдвиг штриха) равными длине контура (подбирается на глаз, например 500px), а затем любыми известными уже нам способами установить свойство stroke-dashoffset в 0.

Решение

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
    <rect id="dash" width="110" height="80" x="200" y="12" 
        transform="skewX(-40)" stroke-dasharray="400" fill="coral" stroke="black" 
        fill-opacity=".4" stroke-opacity="1" stroke-width="3">
        <animate attributeName="stroke-dashoffset" from="400" to="0" begin="mouseover" dur="3s" />
    </rect>
</svg>

Задание 4

Создайте новый html файл с SVG-изображением. Скопируйте SVG-код иконки из предыдущей лабораторной работы. Увеличьте масштаб при помощи параметра viewBox. Если в этом параметре задать размер меньше, чем в параметрах высоты и ширины SVG области, то изображение зрительно увеличится.

Решение

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: unset;" 
    width="200" height="200" viewBox="0 0 100 100">
    <rect id="dash" width="110" height="80" x="0" y="12" transform="skewX(-40)" 
        stroke-dasharray="400" fill="coral" stroke="black" fill-opacity=".4" 
            stroke-opacity="1" stroke-width="3">
         <animate attributeName="stroke-dashoffset" from="400" to="0" dur="3s" 
            repeatCount="indefinite" fill="freeze"/>
    </rect>
</svg>

Задание 5

Задайте контуру свойства stroke-dasharray и stroke-dashoffset. Примените эффект прорисовки при помощи команды:
<animate attributeName="stroke-dashoffset" ...></animate>

Решение

SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: unset;">
    <rect id="dash" width="110" height="80" x="100" y="12" transform="skewX(-40)" 
        stroke-dasharray="400" fill="coral" stroke="black" fill-opacity=".4" 
        stroke-opacity="1" stroke-width="3">
        <animate attributeName="stroke-dashoffset" from="400" to="0" dur="3s" 
            repeatCount="indefinite" fill="freeze"/>
    </rect>
</svg>

Предыдущая лабораторная

Следующая лабораторная