Решил посмотреть, что я могу сделать с помощью SVG. В частности, меня интересует анимация текста, какими браузерами поддерживается, где она может пригодиться и какие у неё плюсы и минусы. Итак, начало:

1. Простое движение текста

Посмотрим на код svg-файла:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
width="400px" height="40px" viewBox="0 0 400 40">
       <text
       style="font-size:20px;fill:#000000;font-family:Garamond"
       x="0"
       y="0">
       <tspan x="0" y="50">Люблю грозу в начале мая,</tspan>
       <tspan x="0" y="100">Когда весенний, первый гром,</tspan>
       <tspan x="0" y="150">Как бы резвяся и играя,</tspan>
       <tspan x="0" y="200">Грохочет в небе голубом.</tspan>
    <animateMotion path="M 0 0 L 0 -200"  dur="6s" repeatCount="indefinite" />
    </text>
</svg>

Во всем документе у нас есть один элемент - текст, а в нём 4 элемента tspan, для каждого из которых указаны координаты расположения. Это не очень удобно, но перевод строки в SVG 1.1 не поддерживается, поэтому либо мы используем tspan, либо несколько элементов text (в этом случае все четыре строки нельзя будет выделить мышью одновременно), либо с помощью foreignObject. Я решил, что для 4х строк ограничусь tspan.

Между тегами <text> и </text> помещаем animateMotion, который будет перемещать текст по пути (path) в течение 6 секунд (dur), а потом начнёт всё заново бесконечное число раз (repeatCount="indefinite").

2. Неравномерное движение

Сделать так, чтобы текст ненадолго задерживался в центре, немного сложнее, вот код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
width="400" height="36px" viewBox="0 0 400 36">

    <text
       style="font-size:20px;fill:#000000;font-family:Garamond"
       x="0"
       y="0">
       <tspan x="0" y="50">Люблю грозу в начале мая,</tspan>
       <tspan x="0" y="100">Когда весенний, первый гром,</tspan>
       <tspan x="0" y="150">Как бы резвяся и играя,</tspan>
       <tspan x="0" y="200">Грохочет в небе голубом.</tspan>
<animateMotion
         keyTimes="0; 0.075;0.175; 0.325; 0.425; 0.575;0.675;0.825;0.925; 1"
         values="0,0;0,-25;0,-25;0,-75;0,-75;0,-125;0,-125;0,-175;0,-175;0,-204"
         repeatCount="indefinite"       
         dur="8s"
         calcMode="linear">
      </animateMotion>
    </text>

</svg>

Чтобы сделать движение неравномерным, разбиваем время цикла анимации на точки (keyTimes) от 0 до 1 и для каждой временной точки соответствующим значением устанавливаем координаты (values) - количество keyTimes и values должно совпадать. Нужно иметь в виду, что без параметра calcMode="linear" неравномерного движения не получится, потому что animateMotion по умолчанию создаёт равномерное движение.

Код вставки на страницу может быть таким:

<object data="http://example.com/test.svg" width="400" height="40"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Судя по всему, если не нужно иметь доступ к структуре svg-файла из javascript, лучше использовать object (другие варианты вставки можно найти тут)

Работоспособность была проверена для браузеров Opera, Firefox, Chromium и Midori.

Много подробной информации о элементе text в SVG - http://www.w3.org/TR/SVG/text.html

Предыдущая запись Следующая запись