Читаем без скачивания HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Но есть и другие возможности и особенности, о которых стоит узнать, например SMIL-анимация, иные способы ссылок на внешние таблицы стилей, пометка внутренних стилей с помощью разделителей символьных данных, усовершенствование SVG-технологии с помощью JavaScript и использование медиазапросов внутри SVG-документов. Приступим к их изучению.

SMIL-анимация

SMIL-анимация (http://www.w3.org/TR/smil-animation/) является способом определения анимации для SVG-графики внутри самого SVG-документа.

SMIL (если интересно, произносится как smile, то есть «смайл», что созвучно со словом, означающим улыбку) расшифровывается как язык разметки для создания интерактивных мультимедийных презентаций (Synchronized Multimedia Integration Language), он был разработан в качестве способа определения анимации внутри XML-документа (вспомним, что в SVG-документах используется XML).

Рассмотрим пример определения анимации на основе SMIL:

<g class="star_Wrapper" fill="none" fill-rule="evenodd">

    <animate xlink:href="#star_Path" attributeName="fill"

attributeType="XML" begin="0s" dur="2s" fill="freeze" from="#F8E81C"

to="#14805e" />

    <path id="star_Path" stroke="#9 79797" stroke-width="3"

fill="#F8E81C" d="M99154l-58.7830.90211.227-65.45L3.89473.097l65.717-9.55L994l29.3959.5565.716 9.548-47.55346.35311.22665.452z" />

</g>

Я воспользовался разделом из ранее рассмотренного нами SVG-документа. Тег g обозначает в SVG группирующий элемент, а в данный элемент включается как фигура звезды (путевой элемент с id="star_Path"), так и SMIL-анимация внутри элемента animate. Эта простая анимация меняет цвет заполнения звезды с желтого на зеленый (проводит операцию под названием tweening) в течение двух секунд. Кроме того, это делается, когда SVG-графика вставляется в страницу с помощью тегов img, object, указания в свойстве background-image или непосредственно в сам код страницы (если честно, то пример в файле каталога example_07-03 можно посмотреть в любом современном браузере, кроме Internet Explorer).

Tweening

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

Правда, здорово получилось? Да, вот так все и могло бы быть. Но, несмотря на то что данная технология некоторое время даже рассматривалась как стандарт, дни ее, похоже, сочтены.

Конец улыбки SMIL. У SMIL нет поддержки в Internet Explorer. Никакой. Ни малейшей. И все. Пшик. Я могу продолжить сокрушаться, но, полагаю, вы поняли, что на данный момент SMIL не имеет никакой поддержки в Internet Explorer.

А что еще хуже, в Microsoft даже не планируют когда-либо ее вводить. Состоянием дел можно поинтересоваться на сайте https://status.modern.ie/svgsmilanimation?term=SMIL.

Вдобавок в Chrome стали просматриваться тенденции к запрещению SMIL: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM.

Занавес.

примечание

Если вы все же испытываете потребность в использовании SMIL, то у Сары Сьюайден (Sara Soueidan) есть превосходная и очень подробная статья о SMIL-анимации по адресу http://css-tricks.com/guide-svg-animations-smil/.

К счастью, существует масса других способов применения эффектов анимации к SVG-графике, которые мы вскоре рассмотрим. Поэтому, если вам приходится поддерживать Internet Explorer, положитесь именно на них.

Задание стилей SVG с помощью внешней таблицы стилей

Придать стиль SVG-документу можно с помощью кода CSS. Это может быть CSS-код, заключенный в сам SVG-документ, или же таблицы стилей CSS, куда можно записать весь ваш обычный код CSS.

Теперь, если вернуться к ранее показанной таблице свойств, вы увидите, что стилевое оформление SVG с помощью внешней CSS-таблицы невозможно, когда SVG-документ включен с использованием тега img или в качестве значения свойства background-image (за исключением Internet Explorer). Такая возможность появляется только тогда, когда SVG-графика вставляется с помощью тега object или непосредственно в код страницы.

Для создания ссылки на внешнюю таблицу стилей из SVG-документа существует два варианта синтаксиса. Самый простой способ заключается в применении следующего кода (который обычно добавляется в раздел defs):

<link href="styles.css" type="text/css" rel="stylesheet"/>

Это похоже на то, как мы использовали ссылку на таблицу стилей до выхода HTML5. (Обратите, к примеру, внимание на атрибут type, который в HTML5 уже не нужен.) Но, несмотря на то что этот способ работает во многих браузерах, он не упоминается в спецификации, определяющей способы ссылки SVG-документа на внешние таблицы стилей (http://www.w3.org/TR/SVG/styling.html).

А вот как выглядит правильный или официальный способ, фактически определенный для XML в далеком 1999 году (http://www.w3.org/1999/06/REC-xml-stylesheet-199 90629/):

<?xml-stylesheet href="styles.css" type="text/css"?>

Эта строка кода должна быть в вашем файле выше открывающего SVG-элемента, например:

<?xml-stylesheet href="styles.css" type="text/css"?>

<svg width="198" height="188" viewBox="00198188" xmlns="http://www.

w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Интересно, что последний вариант синтаксиса является единственным работающим в Internet Explorer. Поэтому, если нужна ссылка на внешнюю таблицу стилей из вашего SVG-документа, то для более широкой поддержки я рекомендую использовать второй вариант синтаксиса.

Использовать внешнюю таблицу стилей совсем не обязательно, если хотите, можете воспользоваться стилями, непосредственно встроенными в сам SVG.

Задание стилей SVG с помощью внутренних стилей

Стили для SVG можно поместить в сам SVG-документ в элементе defs. Поскольку структура SVG-документа основана на XML, надежнее будет включить маркер Character Data (CDATA). Этот маркер просто сообщает браузеру, что информация, находящаяся внутри ограниченного раздела символьных данных, может быть истолкована как XML-разметка, но не должна толковаться в этом качестве. Используемый для этого синтаксис выглядит следующим образом:

<defs>

    <style type="text/css">

        <![CDATA[

            #star_Path {

                stroke: red;

            }

        ]]>

    </style>

</defs>

Свойства и значения SVG внутри CSS. Обратите внимание на свойство stroke в предыдущем блоке кода. Это свойство не CSS, а SVG. Существует довольно много специализированных свойств SVG, которые можно использовать в стилях (неважно, где они объявлены, во встроенном коде или во внешней таблице стилей). Например, для SVG указывается не background-color, а fill. Вместо указания border указывается stroke-width. Полный перечень специализированных свойств SVG можно найти в спецификации по адресу http://www.w3.org/TR/SVG/styling.html.

Как во встроенном, так и во внешнем коде CSS допустимо все, чего можно ожидать от обычного CSS: изменение места появления элементов, анимация, преобразование элементов и т. д.

Анимация SVG-графики с помощью CSS

Рассмотрим небольшой пример добавления в SVG CSS-анимации (следует помнить, что эти стили могут так же легко оказаться и во внешней таблице стилей).

Возьмем пример со звездой, рассматриваемый во многих местах этой главы, и заставим звезду вращаться. Окончательный вид примера можно найти в файле каталога example_07-07:

<div class="wrapper">

    <svg width="198" height="188" viewBox="00220200" xmlns="http://

www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <title>Star 1</title>

        <defs>

            <style type="text/css">

                <![CDATA[

                @keyframes spin {

                    0% {

                        transform: rotate(0deg);

                    }

                    100% {

                        transform: rotate(360deg);

                    }

                }

                .star_Wrapper {

                        animation: spin 2s 1s;

                        transform-origin: 50% 50%;

                }

                .wrapper {

                        padding: 2rem;

                        margin: 2rem;

                }

                ]]>

            </style>

            <g id="shape">

                <path fill="#14805e" d="M50 50h50v50H50z"/>

                <circle fill="#ebebeb" cx="50" cy="50" r="50"/>

            </g>

        </defs>

        <g class="star_Wrapper" fill="none" fill-rule="evenodd">

            <path id="star_Path" stroke="#333" stroke-width="3"

fill="#F8E81C" d="M99154l-58.7830.90211.227-65.45L3.89473.097l65.717-9.55L994l29.3959.5565.7169.548-47.55346.35311.22665.453z"/>

        </g>

    </svg>

</div>

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

совет

Заметили, как SVG-элементу была назначена исходная точка преобразования 50 % 50 %? Дело в том, что, в отличие от CSS, по умолчанию исходная точка преобразования в SVG не устанавливается как 50 % 50 % (по центру обеих осей), а имеет значение 0 0 (в левом верхнем углу). Если не установить это свойство, звезда будет вращаться вокруг точки в левом верхнем углу.

Используя одну лишь CSS-анимацию, в анимации SVG-графики можно зай­ти довольно далеко (если предположить, что насчет Internet Explorer волноваться не придется). Но если нужно добавить интерактивности, поддержку Internet Explorer или синхронизировать ряд событий, лучше будет положиться на JavaScript. Хорошей новостью в этом плане является наличие большого количества библиотек, существенно облегчающих анимацию SVG-графики. А теперь рассмотрим примеры.