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