Как задать стили для SVG

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем изучать svg и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.

Стилизовать svg объекты через css мы можем так же, как и html элементы, но есть некоторые исключения. Например, чтобы задать фоновый цвет, используется свойство fill, а рамка задаётся с помощью свойства stroke. Все свойства вы можете посмотреть на сайте консорциума w3.org.

Как стилизовать SVG

Способы стилизации SVG

Первый способ задания стилей - через атрибуты. Этот подход мы уже использовали в предыдущей статье.

<svg>
  <rect width="200" height="200" fill="#ccc" stroke="#000" stroke-width="1">
</svg>

Т.е. мы просто пишем название атрибута-свойства и через равно его значение.

Второй способ задания стилей - через атрибут style.

<svg>
  <rect width="200" height="200" style="fill: #ccc; stroke: #000">
</svg>

Пишем атрибут style и внутри него через точку с запятой свойства. Свойства задаются в таком формате: свойство: значение;

Третий способ задания стилей - через атрибут style в теге head.

<head>
<style>
  <![CDATA[
   rect {
    fill: #ccc;
    stroke: #000;
    stroke-width: 1;
   }    rect:hover {
    stroke: #0f0;
    fill: yellow;
   }
  ]]>
</style>
</head>
<body>
  <svg>
   <rect x="10" y="10" width="100" height="100">
  </svg>
</body>

В статье что такое svg я писал , что SVG основан на XML и, следовательно, стили должны быть в секции CDATA.

Четвёртый способ задания стилей - вынести все стили в отдельный файл.

Ничего необычного. Просто вынесите все стили в отдельный .css файл и подключите его в теге head

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

Вот и все способы задания стилей для SVG объектов. Напоследок, давайте рассмотрим, как задавать общие стили для нескольких элементов.

С помощью тега g можно объединить несколько элементов и к каждому из них будут применены стили, заданные в теге g.

<svg>
  <g style="fill: #ccc; stroke: #000; stroke-width: 1">    <circle cx="40" cy="40" r="30" />    <rect width="50" height="50" x="50" y="30" />   </g>
</svg>

Вот и всё. Сегодня мы разобрались, как стилизовать SVG объекты через css.

Прочитано 464 раз Последнее изменение Воскресенье, 19 февраля 2017 16:25
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

1 Комментарий

  • Комментировать Серый Среда, 05 апреля 2017 04:37 написал Серый

    Классные решения. Спасибо. Беру на вооружение. А как все эти знания применить в Adobe Muse? Я так понимаю, что лучше сделать это через отдельный файл стилей. Но тогда просмотр полноценного дизайна будет возможен только после сохранения окончательного варианта, а в процессе разработки придется лицезреть по принципу "как есть" и довольствоваться игрой воображения. Или можно как-то вывернуться с помощью вставки html кода?

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+