-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclipping-masking.html
46 lines (42 loc) · 1.85 KB
/
clipping-masking.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>剪切与遮罩</title>
</head>
<body>
<!-- clip-path 覆盖谁 谁显示 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<clipPath id="clipping">
<rect x="0" y="0" width="200" height="100" fill="red"></rect>
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" fill="yellow" clip-path="url(#clipping)"></circle>
</svg>
<!--mask 继承渐变-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="yellow" stop-opacity="0"></stop>
<stop offset="0.5" stop-color="white" stop-opacity="1"></stop>
<stop offset="1" stop-color="white" stop-opacity="0"></stop>
</linearGradient>
<mask id="mask">
<rect x="0" y="0" width="200" height="200" fill="url(#gradient)"></rect>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green"></rect>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)"></rect>
</svg>
<!--opacity 边框、填充一起变化-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="20" y="20" width="100" height="100" fill="red" stroke="green" stroke-width="20" opacity="0.5"></rect>
</svg>
<!--边框在填充之上，边框向两边扩展-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="0" y="0" width="200" height="200" fill="red"></rect>
<circle cx="100" cy="100" r="80" fill="green" stroke-width="30" stroke="yellow" stroke-opacity="0.5"></circle>
</svg>
</body>
</html>