1. Веб-технологии для разработчиков
  2. SVG
  3. Reference
  4. Справочник SVG атрибутов
  5. fill-rule

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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 ⁨март 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

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

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content