使用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属性。
微信公众号
手机浏览(小程序)
Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages:
error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(): Failed to enable crypto in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_46635.jpg): failed to open stream: operation failed in
/mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line
57
