使用SVG遮罩功能, 可以将遮罩应用于SVG形状。 SVG遮罩是剪切路径的更高级版本, 用于确定SVG形状的哪些部分可见以及具有哪些透明度。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="450" width="450">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100" >
<rect x="0" y="0" width="100" height="100"
style="stroke:none; fill: #ffffff"/>
</mask>
</defs>
<rect x="1" y="1" width="200" height="200"
style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
</svg>
</body>
</html>立即测试
解释
- <mask>元素的id属性定义了掩码的唯一名称。
- <mask>的<rect>元素定义蒙版的形状。
- <rect>元素的style属性使用mask CSS属性具有mask ID属性。
