Про CSS

SVG: заливка и обводка

Содержание:
fill
fill-rule
fill-opacity
stroke
stroke-width
stroke-linecap
stroke-linejoin
stroke-dasharray
stroke-dashoffset
stroke-opacity

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

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

В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none, ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black.

<svg width="200" height="200">
  <defs>
    <symbol id="s-rect">
      <rect width="70" height="70"/>
    </symbol>
    <linearGradient id="g-green"
      x1="0%" y1="0%"
      x2="0%" y2="90%"
    >
      <stop offset="0%" stop-color="yellowgreen" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>

  <use xlink:href="#s-rect"
    x="20" y="20"
    fill="hsla(348, 83%, 47%,.3)"/> <!-- HSLA -->
  <use xlink:href="#s-rect"
    x="110" y="20"
    fill="rgb(255, 215, 0)"/> <!-- RGB -->
  <use xlink:href="#s-rect"
    x="20" y="110"
    fill="url(#g-green)"/> <!-- Градиент -->
  <use xlink:href="#s-rect"
    x="110" y="110"
    fill="skyblue"/> <!-- Цвет по названию -->
</svg>

fill-rule

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

Возможные значения: nonzero, evenodd

fill-rule="nonzero"

fill-rule="evenodd"

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).

<!-- ... -->
<use xlink:href="#s-rect"
  x="20" y="20"
  fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="50" y="50"
  fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="80" y="80"
  fill="url(#g-green)" fill-opacity=".5"/>
<!-- ... -->

stroke

Цвет обводки. Значения по умолчанию нет.

<svg width="200" height="200">
  <rect width="160" height="160" x="20" y="20"
    fill="none"
    stroke="yellowgreen"/>
</svg>

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

<svg width="200" height="200">
  <rect width="100" height="100" x="50" y="50"
    fill="none" stroke="gold"
    stroke-width="10"/>
  <rect width="160" height="160" x="20" y="20"
    fill="none" stroke="yellowgreen"
    stroke-width="10%"/>
</svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.

<!-- ... -->
  <use xlink:href="#s-path" stroke="orangered" y="20"
    stroke-linecap="butt"/>

  <use xlink:href="#s-path" stroke="olivedrab" y="85"
    stroke-linecap="round"/>

  <use xlink:href="#s-path" stroke="steelblue" y="150"
    stroke-linecap="square"/>
<!-- ... -->

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.

<!-- ... -->
  <use xlink:href="#s-corner" stroke="orangered" y="0"
    stroke-linejoin="miter"/>

  <use xlink:href="#s-corner" stroke="olivedrab" y="80"
    stroke-linejoin="round"/>

  <use xlink:href="#s-corner" stroke="steelblue" y="160"
    stroke-linejoin="bevel"/>
<!-- ... -->

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

<svg width="300" height="160">
  <path d="M 20 20 h 260"
    stroke="purple" stroke-width="1"
    stroke-dasharray="1" />
  <path d="M 20 40 h 260"
    stroke="mediumspringgreen" stroke-width="15"
    stroke-dasharray="1 3" />
  <path d="M 20 60 h 260"
    stroke="orangered" stroke-width="1"
    stroke-dasharray="5%" />
  <path d="M 20 80 h 260"
    stroke="green" stroke-width="1"
    stroke-dasharray="1 5" />
  <path d="M 20 100 h 260"
    stroke="steelblue" stroke-width="1"
    stroke-dasharray="2 7 6" />
  <path d="M 20 120 h 260"
    stroke="orange" stroke-width="5"
    stroke-dasharray="5" />
  <path d="M 20 140 h 260"
    stroke="mediumseagreen" stroke-width="1"
    stroke-dasharray="12% 5%" />
</svg>

Используя обводку и простые фигуры можно получить удивительные вещи:

See the Pen SVG-patterns by yoksel (@yoksel) on CodePen.


Также stroke-dasharray интересно сочетается с анимацией:

See the Pen Animated stroke by yoksel (@yoksel) on CodePen.

stroke-dashoffset

Свойство позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0.

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

<svg width="270" height="270">
  <g class="g-circles" fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> <!-- Красная обводка без смещения -->
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> <!-- Оранжевая обводка смещена на 25% -->
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> <!-- Желтая обводка смещена на 50% -->
  </g>
</svg>

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.

See the Pen dasharray + dashoffset = magic by yoksel (@yoksel) on CodePen.

Для перезапуска нажмите Rerun.

Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

<svg width="200" height="200">
  <g class="g-circles" fill="none"
    stroke-width="15">
    <circle r="40" cx="60" cy="60"
      stroke="crimson"
      stroke-opacity=".7"/>
    <circle r="55" cx="100" cy="100"
      stroke="orangered"
      stroke-opacity=".5" />
    <circle r="40" cx="140" cy="140"
      stroke="gold"
      stroke-opacity=".25"/>
  </g>
</svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

Ссылки по теме:
w3.org/TR/SVG
Метки:
SVG
←SVG-pathSVG-иконки→
Наверх