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
225
226
227
228
229
230
231
232
233
234
|
---
title: Применение эффектов SVG к содержимому HTML
slug: Web/SVG/Applying_SVG_effects_to_HTML_content
translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
---
<p>Современные браузеры поддерживают <a href="/en-US/docs/SVG">SVG</a> в стилях <a href="/en-US/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> для применения графических эффектов к HTML-контенту.</p>
<p>Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: <a href="/en-US/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/en-US/docs/Web/CSS/clip-path"><code>clip-path</code></a>, и <a href="/en-US/docs/Web/CSS/filter"><code>filter</code></a>. </p>
<div class="note"><strong>Примечание:</strong> Ссылки на SVG во внешних файлах должны быть в том же самом источнике <a href="/en-US/docs/Web/Security/Same-origin_policy">same origin</a> , что и ссылочный документ.</div>
<h2 id="Использование_встроенного_SVG">Использование встроенного SVG</h2>
<p>Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG. </p>
<pre class="brush: html"><style>p { mask: url(#my-mask); }</style>
</pre>
<p>В приведённом выше примере все параграфы маскируются с помощью <a href="/en-US/docs/Web/SVG/Element/mask">SVG</a> <a href="/en-US/docs/Web/SVG/Element/mask"><code><mask></code></a> с <a href="/en-US/docs/Web/HTML/Global_attributes/id">ID</a> <code>my-mask</code>. </p>
<h3 id="Пример_маскировка">Пример: маскировка</h3>
<p>Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:</p>
<pre class="brush: html"><svg height="0">
<mask id="mask-1">
<linearGradient id="gradient-1" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-opacity="0" offset="1"/>
</linearGradient>
<circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
<rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
</mask>
</svg>
</pre>
<pre class="brush: css">.target {
mask: url(#mask-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}</pre>
<p>Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- <code>#mask-1</code>, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.</p>
<p>Применение SVG-эффекта к (X) HTML выполняется путём назначения <code>target</code> классу, определённому выше элементу, например:</p>
<pre class="brush: html"><p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>
</pre>
<p>Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.</p>
<p>{{EmbedLiveSample('Пример_маскировка', 650, 200)}}</p>
<h3 id="Пример_обрезание">Пример: обрезание</h3>
<p>Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.</p>
<pre class="brush: html"><p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>
<button onclick="toggleRadius()">Toggle radius</button>
<svg height="0">
<clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
<circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
<rect x="0.5" y="0.2" width="0.5" height="0.8"/>
</clipPath>
</svg>
</pre>
<pre class="brush: css">.target {
clip-path: url(#clipping-path-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}</pre>
<p>Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID <code>#clipping-path-1</code>, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с <code>target</code> классом.</p>
<p>Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:</p>
<pre class="brush: js">function toggleRadius() {
var circle = document.getElementById("circle");
circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}
</pre>
<p>{{EmbedLiveSample('Пример_обрезание', 650, 200)}}</p>
<h3 id="Пример_Фильтрация">Пример: Фильтрация</h3>
<p>Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover">hover</a> мыши.</p>
<pre class="brush: html"><p class="target" style="background: lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>
</pre>
<p>Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:</p>
<pre class="brush: html"><svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="3"/>
</filter>
</svg></pre>
<p>Вы также можете применить цветовую матрицу:</p>
<pre class="brush: html"><svg height="0">
<filter id="f2">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>
</pre>
<p>И ещё несколько фильтров:</p>
<pre class="brush: html"><span><svg height="0">
</span> <filter id="f3">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="f4">
<feSpecularLighting surfaceScale="5" specularConstant="1"
specularExponent="10" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
</filter>
<filter id="f5">
<feColorMatrix values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
</filter>
<span></svg></span></pre>
<p>Пять фильтров применяются с использованием следующего CSS:</p>
<pre class="brush: css">p.target { filter:url(#f3); }
p.target:hover { filter:url(#f5); }
b.target { filter:url(#f1); }
b.target:hover { filter:url(#f4); }
pre.target { filter:url(#f2); }
pre.target:hover { filter:url(#f3); }
</pre>
<p>{{EmbedLiveSample('Пример_Фильтрация', 650, 200)}}</p>
<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
<h3 id="Пример_размытый_текст">Пример: размытый текст</h3>
<p>Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также <a href="/en-US/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). Вы можете добиться такого же эффекта, используя фильтры SVG.</p>
<pre class="brush: html"><p class="blur">Time to clean my glasses</p>
<svg height="0">
<defs>
<filter id="wherearemyglasses" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
</svg>
</pre>
<p>Вы можете применить SVG и CSS-фильтр в том же классе:</p>
<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre>
<p>{{ EmbedLiveSample('Пример_размытый_текст', 300, 100) }}</p>
<p>Размытие является сложным вычислением, поэтому используйте его экономно, особенно в элементах, которые прокручиваются или анимируются.</p>
<h3 id="Пример_текстовые_эффекты">Пример: текстовые эффекты</h3>
<p>Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML.</p>
<p>Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст:</p>
<pre class="brush: html"><svg height="60" width="200">
<text x="0" y="15" fill="blue" transform="rotate(30 20,50)">Пример текста</text>
</svg>
</pre>
<h2 id="Использование_внешних_ссылок">Использование внешних ссылок</h2>
<p>SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется.</p>
<p>For example, if your CSS is in a file namedit can look like this: <br>
Например, если ваш CSS находится в файле с именем <code>default.css</code>, он может выглядеть следующим образом:</p>
<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre>
<p>Затем SVG импортируется из файла с именем <code>resources.svg</code>, используя путь клипа с ID <code>c1</code>. </p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li>
<li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">Эффекты SVG для HTML-контента</a> (запись в блоге)</li>
<li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (запись в блоге) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog »Архив блога» Ссылки на внешние документы SVG</a>) </li>
</ul>
|
