blob: 5e13cd92bc2d15fed03c643e7a9147a1e21b4cd6 (
plain)
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
181
182
183
184
185
186
187
188
189
190
191
192
|
---
title: SVG and CSS
slug: Web/SVG/Tutorial/SVG_and_CSS
translation_of: Web/SVG/Tutorial/SVG_and_CSS
original_slug: Web/Guide/CSS/Getting_started/SVG_and_CSS
---
<div>
{{CSSTutorialTOC}}</div>
<p>本节将演示如何将CSS应用到 <a href="/en-US/docs/SVG">SVG</a> 中。</p>
<p>你将创建一个简单的演示代码并在支持SVG的浏览器中运行。</p>
<p>这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started">CSS 教程</a> 第二部分的第二节<br>
前一节: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
下一节: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
<h3 id="Information:_SVG" name="Information:_SVG">信息: SVG</h3>
<p><em>SVG</em> (Scalable Vector Graphics)是一个基于XML的图形描述语言。</p>
<p>它可以用于描述静态图、动画，以及用户界面。</p>
<p>和其他基于XML的语言一样，SVG 支持用 CSS 样式表将图形内容和图形样式分离。</p>
<p>在样式表中你可以在任何可以可以指定图片的地方指定一个SVG的URL。比如，在HTML的样式表中，你可以为 <code>background</code> 属性指定一个SVG的URL。</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>
更多细节</caption>
<tbody>
<tr>
<td>
<p>在这个教程编写的时间点(2011中旬)，绝大多数现代浏览器都对SVG有基本的支持。其中包括 Internet Explorer 9 及其后续版本。一些SVG特性只被某些浏览器支持。参见 <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a> 了解支持情况。 参见 <a href="/en-US/docs/SVG/Element">SVG element reference</a> 了解兼容情况。</p>
<p>通过安装 <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a> 提供的插件，你可以让某些浏览器支持SVG。</p>
<p>欲在Mozilla了解更多关于SVG的信息，参考 <a href="/en-US/docs/SVG">这里SVG</a>。</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration">实例: 一个SVG演示</h3>
<p>建立一个SVG文件<code>doc8.svg。</code>复制下面所有内容：</p>
<pre class="brush: xml"><?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style8.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600px" height="600px" viewBox="-300 -300 600 600"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>SVG demonstration</title>
<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
<defs>
<g id="segment" class="segment">
<path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
<path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
</g>
<g id="quadrant">
<use xlink:href="#segment"/>
<use xlink:href="#segment" transform="rotate(18)"/>
<use xlink:href="#segment" transform="rotate(36)"/>
<use xlink:href="#segment" transform="rotate(54)"/>
<use xlink:href="#segment" transform="rotate(72)"/>
</g>
<g id="petals">
<use xlink:href="#quadrant"/>
<use xlink:href="#quadrant" transform="rotate(90)"/>
<use xlink:href="#quadrant" transform="rotate(180)"/>
<use xlink:href="#quadrant" transform="rotate(270)"/>
</g>
<radialGradient id="fade" cx="0" cy="0" r="200"
gradientUnits="userSpaceOnUse">
<stop id="fade-stop-1" offset="33%"/>
<stop id="fade-stop-2" offset="95%"/>
</radialGradient>
</defs>
<text id="heading" x="-280" y="-270">
SVG demonstration</text>
<text id="caption" x="-280" y="-250">
Move your mouse pointer over the flower.</text>
<g id="flower">
<circle id="overlay" cx="0" cy="0" r="200"
stroke="none" fill="url(#fade)"/>
<use id="outer-petals" xlink:href="#petals"/>
<use id="inner-petals" xlink:href="#petals"
transform="rotate(9) scale(0.33)"/>
</g>
</svg>
</pre>
<p>创建一个CSS文件, <code>style8.css。</code> 复制下面所有内容：</p>
<pre class="brush: css">/*** SVG demonstration ***/
/* page */
svg {
background-color: beige;
}
#heading {
font-size: 24px;
font-weight: bold;
}
#caption {
font-size: 12px;
}
/* flower */
#flower:hover {
cursor: crosshair;
}
/* gradient */
#fade-stop-1 {
stop-color: blue;
}
#fade-stop-2 {
stop-color: white;
}
/* outer petals */
#outer-petals {
opacity: .75;
}
#outer-petals .segment-fill {
fill: azure;
stroke: lightsteelblue;
stroke-width: 1;
}
#outer-petals .segment-edge {
fill: none;
stroke: deepskyblue;
stroke-width: 3;
}
#outer-petals .segment:hover > .segment-fill {
fill: plum;
stroke: none;
}
#outer-petals .segment:hover > .segment-edge {
stroke: slateblue;
}
/* inner petals */
#inner-petals .segment-fill {
fill: yellow;
stroke: yellowgreen;
stroke-width: 1;
}
#inner-petals .segment-edge {
fill: none;
stroke: yellowgreen;
stroke-width: 9;
}
#inner-petals .segment:hover > .segment-fill {
fill: darkseagreen;
stroke: none;
}
#inner-petals .segment:hover > .segment-edge {
stroke: green;
}
</pre>
<p>在支持SVG的浏览器中打开上面的文档。将鼠标移到图上。</p>
<p>由于这个wiki不支持嵌入SVG，所以下面是一个截图供参考:</p>
<table style="border: 2px outset #36b;">
<tbody>
<tr>
<td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
</tr>
</tbody>
</table>
<p>解释:</p>
<ul>
<li>这个SVG文档使用常见连接方法引入样式表。</li>
<li>SVG有自己一套CSS属性和对应的值。其中一些和HTML使用的CSS属性相似。</li>
</ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>
挑战</caption>
<tbody>
<tr>
<td>修改样式表使得当鼠标指针移到任何一个内层花瓣上时所有内层花瓣都变为粉色，但不改变外层花瓣的效果。</td>
</tr>
</tbody>
</table>
<h4 id="What_next.3F" name="What_next.3F">接下来?</h4>
<p>如果你有任何疑问或评论请移步到<a href="/en-US/docs/Talk:CSS/Getting_Started/SVG_and_CSS">讨论区</a>。</p>
<p>在这个演示中，支持SVG的浏览器知道如何显示SVG元素。样式表只是修改其呈现的方式。同样，这对HTML和XUL文档也是适用的。你也可以将CSS用于XML文档。（与HTML相比，）XML没有预先为元素定义样式。下一个节将对此进行演示: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
|
