filter: url('filter.svg#myfilter');
}
В самых популярных браузерах (Chrome, Safari, Firefox) будет получен следующий эффект.
К сожалению, этот метод не работает в Internet Explorer 10 или 11. Но есть и другой способ достижения нашей цели, заключающийся в использовании собственного тега image SVG-документа, предназначенного для включения изображения в этот документ. В файле каталога example_07-06 содержится следующая разметка:
<svg height="747px" width="1024px" viewbox="0 0 1024 747"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="myfilter" x="0" y="0">
<feColorMatrix in="SourceGraphic" type="hueRotate"
values="90" result="A"/>
<feGaussianBlur in="A" stdDeviation="6"/>
</filter>
</defs>
<image x="0" y="0" height="747px" width="1024px"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="[email protected]
1024x747.png" filter="url(#myfilter)"></image>
</svg>
Здесь SVG-разметка очень похожа на внешний фильтр filter.svg, который использовался в предыдущем примере, но с добавлением атрибутов height, width и viewbox. Кроме того, изображение, к которому мы хотим применить фильтр, является единственным содержимым SVG-документа за пределами элемента defs. Для ссылки на фильтр используется атрибут filter и передается идентификатор того фильтра, который мы хотим использовать. (В данном случае из внутреннего содержимого расположенного выше элемента defs.)
Хотя над этим подходом придется поработать немного больше, он предназначен для того, чтобы дать вам множество разнообразных фильтрующих эффектов, предоставляемых SVG-технологией, даже в версиях 10 и 11 браузера Internet Explorer.
Заметки по медиазапросам внутри SVG
Все браузеры, понимающие SVG-документы, должны уважать определяемые внутри этих документов медиазапросы CSS. Но при работе с медиазапросами внутри SVG-документов следует помнить о некоторых особенностях.
Предположим, к примеру, что вы вставляете медиазапрос в SVG-документ следующим образом:
<style type="text/css"><![CDATA[
#star_Path {
stroke: red;
}
@media (min-width: 800px) {
#star_Path {
stroke: violet;
}
}
]]></style>
И этот документ выводит на странице SVG-графику шириной 200 пикселов, в то время как окно просмотра имеет ширину 1200 пикселов.
Предполагается, что обвод звезды по контуру будет лиловым (violet), когда ширина экрана не меньше 800 пикселов. Все-таки именно на это настроен наш медиазапрос. Но когда SVG-графика помещается на страницу посредством тега img, или в качестве фонового изображения, или внутри тега object, то, какой при этом окружающий HTML-документ, в расчет не берется. Следовательно, в данной ситуации min-width означает минимальную ширину самой SVG-графики. Поэтому, хотя сама SVG-фигура отображается на странице шириной не менее 800 пикселов, обвод по контуру лиловым не будет.
В противовес этому, когда SVG-документ вставляется непосредственно в код страницы, он, образно говоря, сливается с окружающим HTML-документом. И здесь уже медиазапрос с min-width для того, чтобы принять решение о своем соответствии ситуации, смотрит на параметры окна просмотра (точно так же, как в HTML).
Для решения данной конкретной проблемы, чтобы заставить одни и те же медиазапросы вести себя одинаково, можно придать нашему медиазапросу следующий вид:
@media (min-device-width: 800px) {
#star_Path {
stroke: violet;
}
}
Тогда независимо от размера SVG-графики или способа ее вставки на страницу в расчет будет браться ширина экрана устройства (а по сути, окна просмотра).
Советы по внедрению
Мы почти добрались до конца главы, хотя касательно технологии SVG можно было бы еще о многом поговорить. Поэтому сейчас я перечислю ряд не связанных друг с другом соображений. Им не обязательно давать развернутое толкование, но я перечислю их здесь в форме заметок, чтобы вы сэкономили час-другой на поиске в Google.
• Если вам не требуется придавать SVG-графике эффект анимации, остановите свой выбор на спрайте изображения ваших ресурсов или на таблице стилей с указанием на URI-идентификатор данных. Вам будет намного проще предоставить альтернативные ресурсы, и они практически всегда выгодно отличаются от всего остального с точки зрения поддержания высокой производительности.
• Автоматизируйте как можно больше шагов по созданию ресурса, тем самым вы уменьшите количество допускаемых вами ошибок и предсказуемый результат будет получен гораздо быстрее.
• Для вставки в проект статичных SVG-объектов постарайтесь выбрать единый механизм доставки и придерживаться только его (спрайт изображения, URI-идентификатор данных или встраивание непосредственно в код страницы). Получение одних активов одним способом, а других — другим может стать обременительным занятием, равно как и дальнейшая поддержка различных реализаций.
• Единого варианта выбора SVG-анимации на все случаи жизни не существует. Для получения простых, применяемых от случая к случаю эффектов анимации следует воспользоваться CSS. Для сложных интерактивных эффектов анимации или таких эффектов, ход которых меняется по шкале времени и которые работают и в Internet Explorer, освойте какую-нибудь опробованную библиотеку, например GreenSock, Velocity.js или Snap.svg.
Дополнительные ресурсы
В начале главы уже говорилось, что у меня нет ни места, ни достаточного объема знаний, чтобы поведать буквально обо всем, что касается SVG. Поэтому я лучше поставлю вас в известность о существовании следующих великолепных ресурсов, предоставляющих более глубокий и более широкий взгляд на данный предмет изучения:
• SVG Essentials, второе издание, Дж. Дэвида Эйсенберга (J. David Eisenberg) и Амелии Беллами-Роудс (Amelia Bellamy-Royds) (http://shop.oreilly.com/product/063 69200 32335.do);
• A Guide to SVG Animations (SMIL) Сары Сьюайден (Sara Soueidan) (http://css-tricks.com/guide-svg-animations-smil/);
• Media Queries inside SVGs Test Жереми Патонье (Jeremie Patonnier) (http://jeremie.patonnier.net/experiences/svg/media-queries/test.html).
• An SVG Primer for Today's Browsers (http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html);
• Understanding SVG Coordinate Systems and Transformations (Part 1) Сары Сьюайден (Sara Soueidan) (http://sarasoueidan.com/blog/svg-coordinate-systems/);
• Hands On: SVG Filter Effects (http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm);
• Full set of SVG tutorials Якоба Женкова (Jakob Jenkov) (http://tutorials.jenkov.com/svg/index.html).
Резюме
В данной главе рассмотрен большой объем важной информации, необходимой для понимания SVG-графики и ее внедрения в проекты создания адаптивных веб-приложений. Были изучены различные графические приложения и онлайн-решения, доступные для создания SVG-ресурсов, затем рассмотрены доступные методы их вставки и возможности, предоставляемые каждым из этих методов, а также особенности различных браузеров, которые следует брать в расчет.
Мы также узнали, как ссылаться на внешние таблицы стилей и повторно использовать SVG-символы как на одной и той же странице, так и при внешней ссылке на них. Мы даже посмотрели, как создаются фильтры, использующие SVG, на которые можно сослаться и которые можно использовать в CSS для более широкой поддержки по сравнению с фильтрами CSS.
И наконец, мы рассмотрели способы использования библиотек JavaScript с целью анимации SVG-графики, а также изучили методы оптимизации SVG-графики с помощью средства SVGO.
В следующей главе будут рассмотрены CSS-переходы, преобразования и анимация. Ее стоит изучить и в отношении SVG-графики, поскольку многие синтаксические примеры и технологии могут использоваться применительно к SVG-документам. Итак, запаситесь каким-нибудь горячим питьем (вы его заслужили) и продолжайте чтение книги.
8. Переходы, преобразования и анимация
Исторически сложилось так, что перемещение элементов по экрану или применение к ним эффектов анимации было исключительной прерогативой JavaScript. Сегодня с основной частью задач по перемещению может справиться код CSS с использованием для этого трех своих основных агентов: CSS-переходов (transitions), CSS-преобразований (transforms) и CSS-анимации (animations). Фактически к перемещению имеют непосредственное отношение только переходы и анимация, а преобразование просто позволяет изменять элементы, но, как мы вскоре увидим, оно часто встраивается и в весьма впечатляющие эффекты перемещений.
Чтобы четко разобраться в том, за что отвечает каждая из этих трех составляющих, хочу предложить, возможно, несколько упрощенное описание.
• CSS-переход следует использовать, когда уже имеются начальное и конечное состояние того элемента, к которому его нужно применить, и требуется простой способ получения промежуточных переходов от одного состояния к другому.
• CSS-преобразование используется, когда нужно обеспечить визуальное преобразование элемента, не оказывая при этом никакого влияния на разметку страницы.
• CSS-анимация используется, когда нужно применить к элементу серию изменений с различными ключевыми точками, определяемыми по времени.
