Продолжим изучение SVG-графики, на этот раз коснемся стилизации.
Первая часть: Представляем SVG-графику .
Демонстрация примеров / Скачать исходники
Изменение внешнего вида элементов SVG похоже на HTML, но с некоторыми отличиями.
Например, фон задается свойством наполнять , а не цвет фона, граница гладить вместо границы.
Если вы работали с Adobe Illustrator, эта терминология будет вам знакома.
В соответствии с официальная спецификация SVG свойства можно добавлять непосредственно в теги.
Например наполнять И гладить для прямоугольного элемента:
<svg> <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/> </svg>
Свойства также можно добавлять в виде стиля.
В примере для наполнять И гладить добавлено свойство CSS3 трансформировать : <svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>
Поскольку SVG основан на разметке XML, стиль документа .
svg должен быть заключен в CDATA, иначе дизайн будет конфликтовать с анализаторами XML. В примере добавляется эффект наведения: <style type="text/css" media="screen">
<![CDATA[
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
]]>
</style>
В документе .
svg внешние стили подключаются немного иначе: <Эxml-stylesheet type="text/css" href="style.css"?>
Элементы SVG можно сгруппировать с помощью тега g, после чего можно применить общие стили: <g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
Теги: #веб-дизайн #Работа с векторной графикой #svg
-
Производство Видеоигр И Тестеры Игр
19 Oct, 24 -
Обновление Adobe Indesign 6.0.1
19 Oct, 24 -
Кибер-Сказка: Хакер И Семь Роботов
19 Oct, 24 -
Охота На Стартапы Продолжается!
19 Oct, 24 -
Диалоговое Окно Подключения К Базе Данных
19 Oct, 24
