initial commit

1 files changed, 180 insertions, 0 deletions

diff --git a/files/zh-cn/web/svg/attribute/fill-rule/index.html b/files/zh-cn/web/svg/attribute/fill-rule/index.html
new file mode 100644
index 0000000000..0a9cad8a92
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/fill-rule/index.html
@@ -0,0 +1,180 @@
+---
+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" title="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>