fill-rule

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨марта 2020 года⁩.

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

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

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

Пример

<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 определяет, находится ли точка внутри фигуры: из этой точки в любом направлении проводится луч до бесконечности, а затем проверяются места, где сегменты фигуры пересекают этот луч. Начиная со счёта, равного нулю, прибавляйте единицу при каждом пересечении луча сегментом пути слева направо и вычитайте единицу при каждом пересечении справа налево. После подсчёта пересечений, если результат равен нулю, точка находится вне пути. В противном случае она находится внутри.

Пример

<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 определяет, находится ли точка внутри фигуры: из этой точки в любом направлении проводится луч до бесконечности, после чего подсчитывается количество сегментов пути данной фигуры, которые пересекает луч. Если это число нечётное, точка находится внутри; если чётное — снаружи.

Пример

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

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # WindingRule>

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

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

Смотрите также

CSS-свойство fill-rule

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