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
|
---
title: 剪切和遮罩
slug: Web/SVG/Tutorial/Clipping_and_masking
tags:
- SVG
- 'SVG:Tutorial'
translation_of: Web/SVG/Tutorial/Clipping_and_masking
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
<p>擦除已经创建的元素的部分内容，最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形，你将很快发现下面的属性的作用了。</p>
<p><strong>Clipping</strong>用来移除在别处定义的元素的部分内容。在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。</p>
<p><strong>Masking</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>引用了一个带单个rect元素的<code>{{ SVGElement("clipPath") }}</code>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，<code>clipPath</code>元素经常放在一个<code>defs</code>元素内。</p>
<p>然而，该rect不会被绘制。它的象素数据将用来确定：圆形的哪些像素需要最终呈现出来。因为矩形只覆盖了圆形的上半部分，所以下半部分将消失了：</p>
<div class="hidden">
<h2 id="Creating_clips">Creating_clips</h2>
<h3 id="HTML">HTML</h3>
<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>
</div>
<p>{{ EmbedLiveSample('Creating_clips','240','240','/files/3224/clipdemo.png') }}</p>
<p>现在我们已经有了一个半圆形，不用处理弧形路径元素。对于这个剪切，<code>clipPath</code>内部的每个路径都会被检查到、与它的描边属性一起被估值、变形。然后目标的位于clipPath内容的结果的透明度区域的每一块都不会呈现。颜色、不透明度都没有这种效果，因为它们不能让一部分彻底消失。</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>
<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>mask</code>元素的内容是一个单一的<code>rect</code>元素，它填充了一个透明到白色的渐变。作为红色矩形继承<code>mark</code>内容的<code>alpha</code>值（透明度）的结果，我们看到一个从绿色到红色渐变的输出：</p>
<div class="hidden">
<h2 id="Masking">Masking</h2>
<h3 id="HTML_2">HTML</h3>
<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="black" />
<stop offset="1" stop-color="white" />
</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>
</div>
<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>上面的矩形将绘制为半透明。填充和描边还有两个属性是<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>
<div class="hidden">
<h2 id="Transparency_with_opacity">Transparency_with_opacity</h2>
<h3 id="HTML_3">HTML</h3>
<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>
</div>
<p>{{ EmbedLiveSample('Transparency_with_opacity','240','240','/files/3231/opacitydemo.png') }}</p>
<p>你看到这个示例，红色的圆形在蓝色的背景上，黄色描边设置为50%不透明度，导到双色描边的效果。</p>
<h2 id="利用广为人知的CSS技术">利用广为人知的CSS技术</h2>
<p>Web开发工具箱中有一个很有用的工具是<code>display:none</code>。它虽然几无悬念，但是依然可以在SVG上使用该CSS属性，连同CSS2定义的<code>visibility</code>和<code>clip</code>属性。为了恢复以前设置的<code>display:none</code>，知道这一点很重要：所有的SVG元素的初始<code>display</code>值都是<code>inline</code>。</p>
<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Transformations", "Web/SVG/Tutorial/Other_content_in_SVG") }}</p>
|
