SVG遮罩mask用法示例

使用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属性。
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?