---
title: fill-rule
slug: Web/SVG/Attribute/fill-rule
tags:
  - SVG
  - SVG属性
  - 参考
  - 需要兼容性表
  - 需要示例
translation_of: Web/SVG/Attribute/fill-rule
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG属性参考主页</a></p>

<p><strong><code>fill-rule</code></strong>  是一个外观属性，它定义了用来确定一个多边形内部区域的算法。</p>

<div class="blockIndicator note">
<p><strong>注意：</strong>作为一个外观属性，fill-rule 可以被用于 CSS。</p>
</div>

<p>作为一个外观属性，它可以被应用于任何元素，但只会在这八个元素中有效：{{SVGElement('altGlyph')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('text')}}、{{SVGElement('textPath')}}、{{SVGElement('tref')}} 和 {{SVGElement('tspan')}}。</p>

<p>如何判断一个路径组成的多边形的内部区域，从而给它上色，对于一个简单的、没有交错的路径来说，是很显然的；然而，对于一个更为复杂的路径，比如一条与自身相交的路径，或者是这条路径上的其中一段将另一段包围着，要解释什么是“内部”，就不再这么显然了。</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;!-- fill-rule 的默认值 --&gt;
  &lt;polygon fill-rule="nonzero" stroke="red"
   points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  从这个形状的中心到无穷远处有两条路径段（红色部分），因此
  该区域被认为是形状外部，并且没有被填充。
  --&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>外观属性</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td>nonzero | evenodd</td>
  </tr>
  <tr>
   <th scope="row">默认值</th>
   <td>nonzero</td>
  </tr>
  <tr>
   <th scope="row">可变性</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">规范文档</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<p><code>fill-rule</code> 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：</p>

<dl>
 <dt>
 <h3 id="nonzero_2">nonzero</h3>
 </dt>
</dl>

<p>这个值确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。</p>

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

<div id="nonzero">
<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;!-- nonzero 填充规则被用于路径段会相交的形状上的效果 --&gt;
  &lt;polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  nonzero 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  --&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;!--
  这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  --&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>
</div>

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

<dl>
 <dt>
 <h3 id="evenodd_2">evenodd</h3>
 </dt>
</dl>

<p>这个值用确定了某点属于该形状的“内部”还是“外部”：从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。</p>

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

<div id="evenodd">
<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;!-- evenodd 填充规则被用于路径段会相交的形状上的效果 --&gt;
  &lt;polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/&gt;

  &lt;!--
  evenodd 填充规则被用于一个形状在另一形状内部的效果
  这两个正方形的路径段方向相同（都是顺时针）
  --&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;!--
  这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
  外面的正方形是顺时针，里面的正方形则是逆时针
  --&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>
</div>

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

<h2 id="Browser_Compatibility" name="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>