fill-rule
=========

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

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

Этот атрибут может быть применён к следующим SVG элементам:

* `<path>`
* `<polygon>`
* `<polyline>` (en-US)
* `<text>`
* `<textPath>` (en-US)
* `<tref>` (en-US)
* `<tspan>` (en-US)
Пример
------
```

html,
body,
svg {
  height: 100%;
}
```



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

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```



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

#### Пример
```

html,
body,
svg {
  height: 100%;
}
```



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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.