—»     —»   Масштабируемая векторная графика (SVG) - Оформление посредством CSS
  Раздел: Образование и Изучение   Нет комментариев  

Масштабируемая векторная графика (SVG) - Оформление посредством CSS



Сегодня мы хотим продолжить наш рассказ о масштабируемой векторной графике (SVG) и, как мы отмечали в предыдущей части нашей статьи, одно из главных преимуществ SVG заключается в возможности оформлять элементы посредством CSS.

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Если вы не читали предыдущую часть, то мы настоятельно рекомендуем вам с ней ознакомиться:

Масштабируемая векторная графика (SVG) - Исследование

Параметры оформления SVG-графики

Процесс оформления SVG-графики в основном происходит таким же образом, как и в случае с обычными HTML-элементами. На самом деле, они даже разделяют между собой некоторые параметры. Тем не менее, есть и другие параметры, предназначенные специально для SVG-объектов, которые имеют отдельную спецификацию кроме CSS.

Например, в обычном HTML-элементе мы можем добавить цвет фона, посредством css-параметров background-color или background. В SVG все немного отличается. Цвет фона определяется параметром fill. Также граница элемента указывается посредством параметра stroke, а не посредством border, как это делается в обычном HTML-коде. Полный список различий вы можете найти здесь.

Если вы когда-нибудь работали с векторным редактором вроде Adobe Illustrator, то вы без труда справитесь с названиями параметров в SVG.

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Стилизация SVG-графики

Для оформления SVG-элемента мы можем использовать следующие методы:

Атрибуты презентации

Если вы видели список SVG-параметров, то имейте в виду, что все они могут быть напрямую применены к элементу, чтобы изменить его представление. Следующие примеры показывают нам, как мы можем добавить параметры fill и stroke напрямую к элементу rect;

<svg>
<rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/>
</svg>

Прямоугольник превратится в то, что вы видите на скриншоте ниже:

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Строчная таблица стилей

Мы также можем добавить стилизацию посредством атрибута style. В данном примере мы также добавим параметры fill и stroke к элементу rect, но на этот раз мы добавим их посредством style, а также повернем их посредством параметра css3 transform:

<svg>
<rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/>
</svg>

Прямоугольник превратится в то же, что и в прошлом примере, но только будет немного повернут:

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Внутренняя таблица стилей

Встраивание SVG-стиля посредством элемента style также возможно, и ничем не отличается от того же действия в обычном HTML. Этот пример отображает нам то, как мы добавляем внутренние стили к SVG-элементам в документе .html.

<style type="text/css" media="screen">
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
</style>

Тем не менее, SVG основан на языке XML, так что когда нам нужно будет добавить строчную таблицу стилей в .svg-документ, нам нужно будет поместить объявления стилей внутри cdata, следующим образом:

<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>

Здесь необходим cdata, так как CSS может иметь знак >, который будет конфликтовать с XML-парсерами. Крайне рекомендуется использовать cdata для встраивания стилей в SVG, даже если конфликтующий знак отсутствует в конкретной таблице стилей.

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

Внешняя таблица стилей

Внешняя таблица стилей работает по тому же принципу для SVG-элементов в .html-документе.

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

Опять же, в .svg-документе нам нужно сослаться на внешнюю таблицу стилей, как на xml-таблицу:

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

Группирование элементов

SVG-элементы можно сгруппировать посредством элемента «g». Группирование элементов позволит нам разделить основные стили для всех элементов в группе. Вот пример:

<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;">
<rect x="203" width="200" height="200"/>
<circle cx="120" cy="106" r="100"/>
</g>

Как прямоугольник, так и окружность будут иметь следующий результат:

Масштабируемая векторная графика (SVG) - Оформление посредством CSS

В завершение

Мы только что рассказали вам важную информацию по поводу оформления SVG-элементов посредством CSS, и это лишь одно из нескольких преимуществ SVG-графики. В следующей статье мы расскажем вам об еще одном преимуществе, так что следите за новостями!

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: векторная графика
Опубликовал Design FactoRy   Прочитано (раз): 4414   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930