个性化阅读
专注于IT技术分析

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) 打赏
未经允许不得转载:srcmini » SVG遮罩mask用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏