fill-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Атрибут fill-rule указывает алгоритм, используемый для определения внутренней части фигуры.

Примечание: Как атрибут представления, fill-rule можно использовать в качестве CSS-свойства.

Этот атрибут может быть применён к следующим SVG элементам:

Пример

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Значение по умолчанию для свойства `fill-rule` -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Центральная часть считается не входящей в фигуру и поэтому не заполняется цветом
  -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="150,0 121,90 198,35 102,35 179,90" />
</svg>

Примечания по использованию

Значение	`nonzero` \| `evenodd`
Значение по умолчанию	`nonzero`
Поддержка анимации	discrete

Атрибут fill-rule предоставляет два варианта определения внутренней части фигуры (то есть области, подлежащей заливке):

Значение nonzero определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении, а затем проверки мест, где сегмент фигуры пересекает луч. Начиная с нуля, каждый раз, когда луч пересекает сегмент фигуры слева направо, происходит увеличение счётчика на единицу, а когда справа налево, то уменьшение. Если после подсчёта пересечений результат равен нулю, то точка находится за пределами фигуры, в противном случае — внутри.

Пример

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Применение значения `nonzero` для пересекающихся частей фигуры -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Применение значения `nonzero` для фигуры, находящейся внутри 
  другой фигуры (два квадрата, сегменты которых составлены из точек, 
  расположенных в одном направлении — по часовой стрелке)
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />

  <!--
  Применение значения `nonzero` для фигуры, находящейся внутри 
  другой фигуры (два квадрата, сегменты которых составлены из точек, 
  расположенных в противоположных направлениях: у одного квадрата по
  часовой стрелке, у второго — против)
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
</svg>

evenodd

Значение evenodd определяет принадлежность точки фигуры к внутренней части с помощью рисования луча от этой точки до бесконечности в любом направлении и подсчёта количества сегментов фигуры, которые этот луч пересекает. Если это число нечётное, точка находится внутри, если чётное, то точка снаружи.

Пример

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Применение значения `evenodd` для пересекающихся частей фигуры -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Применение значения `evenodd` для фигуры, находящейся внутри 
  другой фигуры (два квадрата, сегменты которых составлены из точек, 
  расположенных в одном направлении — по часовой стрелке)
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M110,0 h90 v90 h-90 z M130,20 h50 v50 h-50 z" />

  <!--
  Применение значения `evenodd` для фигуры, находящейся внутри 
  другой фигуры (два квадрата, сегменты которых составлены из точек, 
  расположенных в противоположных направлениях: у одного квадрата по
  часовой стрелке, у второго — против)
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M210,0 h90 v90 h-90 z M230,20 v50 h50 v-50 z" />
</svg>

Спецификации

Specification
Scalable Vector Graphics (SVG) 2 # WindingRule

Совместимость с браузерами

BCD tables only load in the browser