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
|
---
title: SVG и CSS
slug: Web/SVG/Tutorial/SVG_and_CSS
translation_of: Web/SVG/Tutorial/SVG_and_CSS
original_slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
---
<div>{{CSSTutorialTOC}}</div>
<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p>
<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p>
<p>Это вторая секция Части II <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</a></p>
<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3>
<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p>
<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p>
<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p>
<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p>
<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
<caption>Немного подробностей</caption>
<tbody>
<tr>
<td>
<p>На момент написания статьи (середина 2011 года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определённых браузерах. Для более подробной информации о текущей поддержке 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>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
<p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</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 #3366bb;">
<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 и их значения. Некоторые из них похожи на значения CSS для HTML.</li>
</ul>
<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
<caption>Задание</caption>
<tbody>
<tr>
<td>Изменить таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</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">Посмотреть решение к этому заданию.</a></p>
<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4>
<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
|
