1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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"><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></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"><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"/>
<!--
这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
外面的正方形是顺时针，里面的正方形则是逆时针
-->
<path fill-rule="nonzero" stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z"/>
</svg></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"><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"/>
<!--
这个例子与第二个例子几乎相同，唯一的区别是：两个形状的路径段方向相反
外面的正方形是顺时针，里面的正方形则是逆时针
-->
<path fill-rule="evenodd" stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z"/>
</svg></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>
|
