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
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus