fill-rule

Baseline Широко поддерживается

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

Свойство fill-rule CSS определяет правило, используемое для определения, какие части холста SVG-фигуры включены внутри фигуры для заливки. При наличии, оно переопределяет атрибут элемента fill-rule.

fill-rule уточняет, какие области фигуры следует считать «внутренними» для фигуры. Оно предоставляет два значения, которые можно установить, чтобы указать браузеру, как определить внутреннюю часть фигуры. Для фигур, у которых нет пересекающихся путей, например, для круга, границы того, что находится внутри фигуры для заливки, интуитивно понятны. Для сложных фигур, включающих пересекающиеся пути (такие как диаграмма Венна) или пути, охватывающие другие пути (такие как пончик), интерпретация, какие части фигуры являются «внутренними» для фигуры и должны быть заполнены свойством fill, может быть не очевидна.

Примечание: Свойство fill-rule применяется только к элементам <path>, <polygon>, <polyline>, <text>, <textPath> и <tspan>, вложенным в элемент <svg>. Оно не применяется к другим SVG, HTML или псевдоэлементам.

Синтаксис

/* keywords */
fill-rule: evenodd;
fill-rule: nonzero;

/* Global values */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;

Значения

nonzero: Для каждой точки фигуры луч проводится в случайном направлении за пределы внешних границ фигуры. Каждый луч проверяется, чтобы определить места пересечения луча с фигурой. Начиная с нуля, добавляется 1 каждый раз, когда сегмент пути пересекает луч слева направо, и вычитается 1 каждый раз, когда сегмент пути пересекает луч справа налево. После подсчета пересечений, если результат равен нулю, то точка находится вне пути. В противном случае она находится внутри.
evenodd: Для каждой точки в области правила заливки луч проводится в случайном направлении. Подсчитывается количество сегментов пути от заданной фигуры, которые пересекает луч. Если это число нечетное, точка находится внутри; если четное, точка находится вне. Ноль считается четным.

Формальное определение

Начальное значение	`nonzero`
Применяется к	SVG-фигурам и элементам текстового содержимого
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

fill-rule = 
  nonzero  |
  evenodd

Примеры

Определение правил заливки для SVG-элементов

Этот пример демонстрирует, как объявляется fill-rule, эффект свойства и то, как свойство CSS fill-rule имеет приоритет над атрибутом fill-rule.

HTML

Мы определяем SVG с двумя сложными фигурами, определенными с помощью элементов SVG <polygon> и <path>. У многоугольника установлен атрибут SVG fill-rule со значением evenodd, а у звездообразного пути установлено значение nonzero, которое является значением по умолчанию. Чтобы сделать линии видимыми, мы устанавливаем обводку в red с помощью атрибута SVG stroke (мы могли бы альтернативно использовать свойство stroke).

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

Вышеупомянутый SVG повторяется трижды; мы показали только одну копию для краткости.

CSS

Для фигур, вложенных в первый SVG, нет примененного CSS. Для фигур внутри второго SVG мы установили значение nonzero . В третьем SVG все вложенные фигуры настроены на значение evenodd.

svg:nth-of-type(2) > * {
  fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
  fill-rule: evenodd;
}

Результаты

С значением nonzero для fill-rule, «внутренняя» часть фигуры — это вся фигура. Значение evenodd определяет некоторый пробел как пустой. На первом изображении рендерится значение fill-rule как атрибут. Объявление fill-rule в CSS переопределяет значения атрибутов на втором и третьем изображениях.

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

Спецификация
CSS Fill and Stroke Module Level 3 # fill-rule

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

	Рабочие столы					Мобильные устройства
	Хром	Кант	Огонь	Опера	Сафари	Хром (Android)	Огонь (Android)	Опера (Android)	Сафари (iOS)	Samsung Internet	WebView (Android)
`fill-rule`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`evenodd`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`nonzero`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Атрибут SVG fill-rule
Свойства отображения: fill-rule, clip-rule, color-interpolation-filters, fill-opacity, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor и vector-effect
opacity
background-color
<color>
<basic-shape> тип данных

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