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
|
---
title: Grafika SVG
slug: Web/SVG/Tutorial/SVG_and_CSS
tags:
- CSS:Na_początek
translation_of: Web/SVG/Tutorial/SVG_and_CSS
original_slug: Web/CSS/Na_początek/Grafika_SVG
---
<p>
</p><p>Ta strona ilustruje specjalny język do tworzenia grafiki: SVG.
</p><p>Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG. </p>
<h3 id="Informacja:_SVG" name="Informacja:_SVG"> Informacja: SVG </h3>
<p><i>SVG</i> (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki.
</p><p>Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika.
</p><p>Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości.
</p><p>Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek.
Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności <code>background</code>.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG.
<p>Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.
</p><p>Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę <a href="pl/SVG">SVG</a> w tym wiki.
</p>
</td></tr></tbody></table>
<h3 id="Zadanie:_Demonstracja_SVG" name="Zadanie:_Demonstracja_SVG"> Zadanie: Demonstracja SVG </h3>
<p>Stwórz nowy dokument SVG jako czysty plik tekstowy, <code>doc8.svg</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre><?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></div>
<p>Stwórz nowy plik CSS, <code>style8.css</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** 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></div>
<p>Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką.
</p><p>To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji.
Grafika wygląda mniej więcej tak:
</p>
<table style="border: 2px outset #36b;">
<tbody><tr>
<td><img alt="Demonstracja SVG">
</td></tr></tbody></table>
<p>Uwagi dotyczące tej demonstracji:
</p>
<ul><li>Dokument SVG posiada odnośniki do arkusza stylów.
</li><li>SVG posiada własne własności i wartości CSS. Niektóre z nich są podobne do własności CSS dla HTML-a.
</li></ul>
<p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków.
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>.
</p><p>W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG.
Arkusz stylów modyfikuje tylko sposób wyświetlania elementów.
Tak samo dzieje się z dokumentami HTML i XUL.
Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów.
Następna strona omawia ten temat:
<b><a href="pl/CSS/Na_pocz%c4%85tek/Dane_XML">Dane XML</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }}
|
