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

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

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

Синтаксис

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

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

evenodd

Для каждой точки в области действия правила заливки в случайном направлении проводится луч. Подсчитывается количество сегментов контура заданной фигуры, которые пересекает луч. Если это число нечётное, точка находится внутри; если чётное — снаружи. Ноль считается чётным числом.

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

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

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

<p>Original SVG</p>

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

<p><code>fill-rule: nonzero;</code></p>
<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>
<p><code>fill-rule: evenodd;</code></p>
<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 {
  border: 1px solid;
  height: calc(33vh - 2.5em);
  margin-bottom: 10px;
}
p {
  margin: 0;
}

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 переопределяет значения атрибутов на втором и третьем изображениях.

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

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

См. также

• Атрибут 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> тип данных