правило заполнения

Атрибут fill-rule — это атрибут отображения, определяющий алгоритм для определения области внутри фигуры.

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

Вы можете использовать этот атрибут со следующими элементами SVG:

Пример

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Default value for fill-rule -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  The center of the shape has two
  path segments (shown by the red stroke)
  between it and infinity. It is therefore
  considered outside the shape, and not filled.
  -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="150,0 121,90 198,35 102,35 179,90" />
</svg>

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

Значение	`nonzero` \| `evenodd`
Значение по умолчанию	`nonzero`
Анимируемо	дискретно

Атрибут fill-rule предоставляет два варианта определения внутренней области (т.е. области заполнения) фигуры:

nonzero

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

Пример

html

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of nonzero fill rule on crossing path segments -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Effect of nonzero fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (both squares drawn clockwise, to the "right")
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  Effect of nonzero fill rule on a shape inside a shape
  with the path segment moving in the opposite direction
  (one square drawn clockwise, the other anti-clockwise)
  -->
  <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">
  <!-- Effect of evenodd fill rule on crossing path segments -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Effect of evenodd fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (both squares drawn clockwise, to the "right")
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  Effect of evenodd fill rule on a shape inside a shape
  with the path segment moving in opposite direction
  (one square drawn clockwise, the other anti-clockwise)
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>

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

Спецификация
Scalable Vector Graphics (SVG) 2 # WindingRule

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`fill-rule`	≤15	≤79	18	≤15	≤13.1	18	18	14	≤13.4	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule