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

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

Пример

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill-rule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support