files/zh-cn/web/svg/tutorial/fills_and_strokes/index.html


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

---
title: 填充和边框
slug: Web/SVG/Tutorial/Fills_and_Strokes
tags:
  - Beginner
  - NeedsLiveSample
  - SVG
  - Tutorial
translation_of: Web/SVG/Tutorial/Fills_and_Strokes
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>

<p>可以使用几种方法来着色（包括指定对象的属性）使用内联CSS样式、内嵌CSS样式，或者使用外部CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。</p>

<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Fill 和 Stroke 属性</h2>

<h3 id="Painting" name="Painting">上色</h3>

<p>现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：<code>fill</code>属性和<code>stroke</code>属性。<code>fill</code>属性设置对象内部的颜色，<code>stroke</code>属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像<em>red</em>这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。</p>

<pre class="brush:xml;"> &lt;rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/&gt;
</pre>

<p>此外，在SVG中你可以分别定义填充色和边框色的不透明度，属性<code>fill-opacity</code>控制填充色的不透明度，属性<code>stroke-opacity</code>控制描边的不透明度。</p>

<div class="note style-wrap">注意，FireFox 3+支持rgba值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和填充/描边的不透明度分开使用。如果同时指定了rgba值和填充/描边不透明度，它们将都被调用。</div>

<h3 id="Stroke" name="Stroke">描边</h3>

<p>除了颜色属性，还有其他一些属性用来控制绘制描边的方式。</p>

<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png"></p>

<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/&gt;
  &lt;line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/&gt;
  &lt;line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/&gt;
&lt;/svg&gt;</pre>

<p><code>stroke-width</code>属性定义了描边的宽度。注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。</p>

<p>第二个影响描边的属性是<code>stroke-linecap</code>属性，如上所示。它控制边框终点的形状。</p>

<p><code>stroke-linecap</code>属性的值有三种可能值：</p>

<ul>
 <li><code>butt</code>用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。</li>
 <li><code>square</code>的效果差不多，但是会稍微超出<code>实际路径</code>的范围，超出的大小由<code>stroke-width</code>控制。</li>
 <li><code>round</code>表示边框的终点是圆角，圆角的半径也是由<code>stroke-width</code>控制的。</li>
</ul>

<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条描边线段之间，用什么方式连接。</p>

<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png"></p>

<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;

  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;

  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
&lt;/svg&gt;</pre>

<p>每条折线都是由两个线段连接起来的，连接处的样式由<code>stroke-linejoin</code>属性控制，它有三个可用的值，<code>miter</code>是默认值，表示用方形画笔在连接处形成尖角，<code>round</code>表示用圆角连接，实现平滑效果。最后还有一个值<code>bevel</code>，连接处会形成一个斜接。</p>

<p>最后，你可以通过指定<code>stroke-dasharray</code>属性，将虚线类型应用在描边上。</p>

<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png"></p>

<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
  &lt;path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
&lt;/svg&gt;</pre>

<p><code>stroke-dasharray</code>属性的参数，是一组用逗号分割的数字组成的数列。注意，和<code>path</code>不一样，这里的数字<strong>必须</strong>用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。第一个例子指定了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染5个填色单位，10个空白单位，5个填色单位，然后回头以这3个数字做一次循环，但是这次是创建5个空白单位，10个填色单位，5个空白单位。通过这两次循环得到偶数模式，并将这个偶数模式不断重复。</p>

<p>另外还有一些关于填充和边框的属性，包括<code>fill-rule</code>，用于定义如何给图形重叠的区域上色；<code>stroke-miterlimit</code>，定义什么情况下绘制或不绘制边框连接的<code>miter</code>效果；还有<code>stroke-dashoffset</code>，定义虚线开始的位置。</p>

<h2 id="Using_CSS" name="Using_CSS">使用CSS</h2>

<p>除了定义对象的属性外，你也可以通过CSS来样式化<code>填充</code>和<code>描边</code>。语法和在html里使用CSS一样，只不过你要把<code>background-color</code>、<code>border</code>改成<code>fill</code>和<code>stroke</code>。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如<code>fill</code>，<code>stroke</code>，<code>stroke-dasharray</code>等，但是不包括下面会提到的渐变和图案等功能。另外，<code>width</code>、<code>height</code>，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。</p>

<div class="note style-wrap"><a class="external external-icon" href="http://www.w3.org/TR/SVG/propidx.html">SVG规范</a>将属性区分成properties和其他attributes，前者是可以用CSS设置的，后者不能。</div>

<p>CSS可以利用style属性插入到元素的行间：</p>

<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
</pre>

<p>或者利用&lt;style&gt;设置一段样式段落。就像在html里这样的&lt;style&gt;一般放在<code>&lt;head&gt;</code>里，在svg里&lt;style&gt;则放在<a href="https://developer.mozilla.org/en/SVG/Element/defs" title="en/SVG/Element/defs"><code>&lt;defs&gt;</code></a>标签里。<code>&lt;defs&gt;</code>表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。</p>

<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;defs&gt;
    &lt;style type="text/css"&gt;&lt;![CDATA[
       #MyRect {
         stroke: black;
         fill: red;
       }
    ]]&gt;&lt;/style&gt;
  &lt;/defs&gt;
  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
&lt;/svg&gt;</pre>

<p>如上把样式放到一块你可以更轻松地调整一大组元素的样式，同样你也可以使用<strong>hover</strong>这样的伪类来创建翻转之类的效果:</p>

<pre class="brush:css;"> #MyRect:hover {
   stroke: black;
   fill: blue;
 }
</pre>

<p>你最好读一下CSS教程以便掌握它，一些可以在html里使用的css，在svg里可能无法正常工作，比如<code>before</code>和<code>after</code>伪类。所以这里需要一点经验。</p>

<p>你也可以定义一个外部的样式表，但是要符合<a class="external external-icon" href="http://www.w3.org/TR/xml-stylesheet/">normal XML-stylesheet syntax</a>的CSS规则:</p>

<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;

&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;rect height="10" width="10" id="MyRect"/&gt;
&lt;/svg&gt;</pre>

<p>style.css看起来就像这样：</p>

<pre class="brush:css;">#MyRect {
  fill: red;
  stroke: black;
}</pre>

<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>