---
title: fill-rule
slug: Web/SVG/Attribute/fill-rule
translation_of: Web/SVG/Attribute/fill-rule
---
<div>{{SVGRef}}</div>

<p>The <strong><code>fill-rule</code></strong> этот  атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.</p>

<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS-свойство.</p>

<p>Как атрибут представления, он может быть применён к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Default value for fill-rule --&gt;
  &lt;polygon fill-rule="nonzero" stroke="red"
   points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  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.
  --&gt;
  &lt;polygon fill-rule="evenodd" stroke="red"
   points="150,0 121,90 198,35 102,35 179,90"/&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<h2 id="Примечания_по_использованию">Примечания по использованию</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><code>nonzero</code> | <code>evenodd</code></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><code>nonzero</code></td>
  </tr>
  <tr>
   <th scope="row">Анимируемый</th>
   <td>Да</td>
  </tr>
 </tbody>
</table>

<p>The <code>fill-rule</code> attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:</p>

<h3 id="nonzero">nonzero</h3>

<p>The value <code>nonzero</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.</p>

<h4 id="Example">Example</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Effect of nonzero fill rule on crossing path segments --&gt;
  &lt;polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  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")
  --&gt;
  &lt;path fill-rule="nonzero" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/&gt;

    &lt;!--
  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)
  --&gt;
  &lt;path fill-rule="nonzero" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p>

<h3 id="evenodd">evenodd</h3>

<p>The value <code>evenodd</code> determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.</p>

<h4 id="Example_2">Example</h4>

<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Effect of evenodd fill rule on crossing path segments --&gt;
  &lt;polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  Effect of evenodd fill rule on on a shape inside a shape
  with the path segment moving in the same direction
  (both squares drawn clockwise, to the "right")
  --&gt;
  &lt;path fill-rule="evenodd" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/&gt;

    &lt;!--
  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)
  --&gt;
  &lt;path fill-rule="evenodd" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>



<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Definition for shapes and text</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition for shapes and text</td>
  </tr>
 </tbody>
</table>

<div class="ddict_div" style="top: 1201.2px; max-width: 120px; left: 303.181px;"><img class="ddict_audio">
<p class="ddict_sentence">да</p>
</div>