-
Notifications
You must be signed in to change notification settings - Fork 0
/
25-mask.html
27 lines (17 loc) · 890 Bytes
/
25-mask.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
<svg viewbox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--
<mask id="hole">
<rect x="0" y="0" width="100" height="100" fill="white" />
<polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50" fill="black" />
</mask>
<circle cx="50" cy="50" r="50" mask="url(#hole)" />
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/clipPath
https://juejin.cn/post/6844903477626273799
https://blog.csdn.net/laozi12345/article/details/114016000
-->
<clipPath id="whiteMask">
<rect x="0" y="0" width="500" height="500" fill="white"/>
<rect x="150" y="100" width="50" height="10" fill="white" />
</clipPath >
<line x1="100" y1="100" x2="200" y2="100" stroke="blue" stroke-width="10" clip-path="url(#whiteMask)"/>
</svg>