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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
|
---
title: SVG i CSS
slug: Web/SVG/Tutorial/SVG_and_CSS
tags:
- CSS
- CSS:Getting_Started
- Example
- Guide
- Intermediate
- NeedsLiveSample
- NeedsUpdate
- SVG
- Web
translation_of: Web/SVG/Tutorial/SVG_and_CSS
original_slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS
---
<div>{{CSSTutorialTOC}}</div>
<p>Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: <a href="/en-US/docs/SVG">SVG</a>.</p>
<p>Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.</p>
<p>Aquesta és la 2nd secció de la Part II del <a href="/en-US/docs/Web/Guide/CSS/Getting_started">tutorial CSS</a>.<br>
Secció anterior: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
Secció següent: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
<h3 id="Information:_SVG" name="Information:_SVG"><span id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>SVG</span></span></h3>
<p><span id="result_box" lang="ca"><em><span>SVG</span></em> <span>(</span><span>Scalable</span> <span>Vector</span> <span>Graphics</span><span>)</span> <span>és</span> <span>un llenguatge</span> <span>basat</span> <span>en XML</span> <span>per a la</span> <span>creació</span> <span>de gràfics</span><span>.</span></span></p>
<p><span id="result_box" lang="ca"><span>Es</span> <span>pot</span> <span>utilitzar</span> <span>per a imatges</span> <span>estàtiques,</span> <span>i</span> <span>també</span> <span>per a animacions</span> <span>i interfícies</span> <span>d'usuari.</span></span></p>
<p>Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.</p>
<p>A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat <code>background</code>.</p>
<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
<caption>Més detalls</caption>
<tbody>
<tr>
<td>
<p>En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les <a href="http://caniuse.com/#search=SVG">taulae SVG en caniuse.com</a> per a una visió general de suport per SVG, o les taules de compatibilitat <a href="/en-US/docs/SVG/Element">referència de l'element SVG</a> per al suport de determinats elements.</p>
<p>Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
<p>Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de <a href="/en-US/docs/SVG">SVG</a> al wiki.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>SVG</span></span></h3>
<p><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document</span> <span>SVG</span> <span>com</span> <span>un arxiu de</span> <span>text</span> <span>pla,</span> <code><span>doc8.svg</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></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>Feu una nou arxiu CSS, <code>style8.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></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>Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.</p>
<p>Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:</p>
<table style="border: 2px outset #3366bb;">
<tbody>
<tr>
<td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
</tr>
</tbody>
</table>
<p>Notes sobre aquesta demostració:</p>
<ul>
<li><span id="result_box" lang="ca"><span>El document</span> <span>SVG</span> <span>vincula</span> la<span> fulla</span> <span>d'estil de</span> <span>la forma</span> <span>habitual.</span></span></li>
<li>SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.</li>
</ul>
<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
<caption>Repte</caption>
<tbody>
<tr>
<td>Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.</td>
</tr>
</tbody>
</table>
<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Veure la solució per el repte.</a></p>
<h4 id="What_next.3F" name="What_next.3F">I ara què?</h4>
<p>En aquesta demostració, el vostre navegador habilitat per SVG ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">dades XML</a></p>
|
