锐客网

  1. 首页 > 睿知 > it技术 > >

SVG遮罩mask用法示例

svgIT知识

使用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>

【SVG遮罩mask用法示例】立即测试
解释
  • < mask> 元素的id属性定义了掩码的唯一名称。
  • < mask> 的< rect> 元素定义蒙版的形状。
  • < rect> 元素的style属性使用mask CSS属性具有mask ID属性。

    推荐阅读


    上一篇：SVG线性渐变用法示例

    下一篇：SVG径向渐变用法示例