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
|
---
title: Обрезка и маска
slug: Web/SVG/Tutorial/Clipping_and_masking
translation_of: Web/SVG/Tutorial/Clipping_and_masking
---
<p><br>
{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
<p> </p>
<p>На первый взгляд, странно стирать то, что было только что нарисовано. Но когда вы попытаетесь создать полукруг в SVG, то сразу столкнетесь со следующими свойствами.<br>
<br>
<strong>Обрезка (Clipping) </strong>позволяет скрыть часть одного или нескольких элементов, используя другой. В этом случае нельзя настроить прозрачность элемента, это подход «все или ничего».<br>
<br>
<strong>Маска</strong>, с другой стороны, позволяет создавать полупрозрачные эффекты (например, размытые края).</p>
<h3 id="Кадрирование_изображений">Кадрирование изображений</h3>
<p>Мы можем создать полукруг на основе окружности:</p>
<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
</pre>
<p>По центру (100,100) нарисован круг с радиусом 100. Атрибут<code> clip-path</code> ссылается на элемент <code>{{ SVGElement("clipPath") }}</code>, который содержит элемент <code>rect</code>. Этот прямоугольник позволит отрисовать верхнюю половину черного холста. Обратите внимание, что элемент <code>clipPath</code> обычно помещается в раздел <code>defs</code>.<br>
<br>
При этом сам прямоугольник отрисован не будет. Вместо этого прямоугольник задаст область отрисовки. Так как прямоугольник перекрывает только верхнюю половину круга, нижняя половина круга исчезает:</p>
<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p>
<p>Теперь мы получили полуокружность без необходимости использования элемента <code>path</code>. При “обрезке” каждый путь внутри <code>clipPath</code> проверяется и оценивается вместе с его свойствами <code>stroke</code> и <code>transform</code>. Другими словами, все что не находится в залитой области <code>clipPath</code> не будет отображено. Цвет, непрозрачность и т. д. не влияют на результат.</p>
<h3 id="Маска">Маска</h3>
<p>Хороший пример использования маски - это градиент. В разных местах изображения с помощью масок можно добиться разной степени прозрачности.</p>
<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
</pre>
<p>Фактически на примере находятся два прямоугольника: зеленый на нижнем слое и красный на верхнем. У красного есть атрибут <code>mask</code>, который ссылается на элемент <code>mask</code>. Содержимое маски это элемент <code>rect</code>, заполненный градиентом, где прозрачная заливка перетекает в белую. В результате, пиксели красного прямоугольника наследуют прозрачность (alpha-value) маски, и мы видим красно-зеленый градиент: </p>
<p>{{ EmbedLiveSample('Masking','240','240','/files/3234/maskdemo.png') }}</p>
<h3 id="Прозрачность_opacity">Прозрачность <code>opacity</code></h3>
<p>Можно достаточно просто установить прозрачность для всего элемента, например используя атрибут <code>opacity</code>:</p>
<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" />
</pre>
<p>Вышеуказанный прямоугольник будет полупрозрачным. Для того, чтобы задать непрозрачность заливке или контуру мы можем использовать 2 отдельных атрибута <code>fill-opacity</code> и <code>stroke-opacity</code>. Обратите внимание, что заполнение контура будет перекрывать основную заливку. Следовательно, если установить прозрачность контура у элемента, который также имеет заливку, половина контура наложится на цвет заливки, а другая на фон:</p>
<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="200" fill="blue" />
<circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg>
</pre>
<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p>
<p>В этом примере используется красный круг на голубом фоне. Желтый контур установлен на 50% непрозрачности, что приводит к эффекту двойного цвета.</p>
<h2 id="Использование_хорошо_известных_CSS_техник">Использование хорошо известных CSS техник</h2>
<p>Одним из мощных инструментов является <code>display: none</code>. Поэтому неудивительно, что было принято решение использовать это CSS свойство в SVG вместе с <code>visibility</code> и <code>clip</code>, как определено в CSS 2. Для восстановления значения по умолчанию ранее важно знать, что начальное значение для всех элементов SVG - <code>inline</code>.</p>
<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
|
