一篇文章带你了解SVG 蒙版(Mask)

浏览: 46

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。

一、简单的蒙版

代码解析:

本示例使用ID=mask1定义一个蒙版。

<mask>元素内部是一个<rect>元素。<rect>元素定义了蒙版的形状。

定义了一个使用mask的<rect>元素,<rect>元素使用CSS style属性mask内部引用mask ID属性。

例:

<svg width="500" height="120">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff" />
</mask>
</defs>
<rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)" />
</svg>

注:

要显示的矩形的高度为100像素,但垂直的前50个像素是可见的。那是因为蒙版矩形只有50个像素高。矩形仅在蒙版矩形所覆盖的部分中可见。

黑色轮廓矩形是没有蒙版的矩形的大小。

二、其他形状的蒙版

可以使用任何SVG形状作为蒙版。

使用圆圈作为蒙版。

<svg>
<defs>
<mask id="mask2" x="0" y="0" width="100" height="100" >
<circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
</mask>
</defs>

<rect x="1" y="1" width="100" height="100"
style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>


</svg>

运行效果:

注:仅在可见蒙版圆的地方可见引用蒙版的矩形。

三、蒙版形状颜色定义蒙版不透明度

1. 如何去定义不透明度 ?

蒙版形状(圆形或矩形)的填充颜色设置为#ffffff。

蒙版形状的颜色定义使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff(白色),使用蒙版的形状将越不透明。蒙版形状的颜色越接近#000000(黑色),使用蒙版的形状将越透明。

2. 案例

其中蒙版由两个具有不同颜色(#ffffff和#66666)的矩形组成。蒙版用于单个矩形,因此运行效果可以使用蒙版查看蒙版中的两个不同形状如何影响相同形状。

<svg width="500" height="120">
<defs>
<mask id="mask3" x="0" y="0" width="100" height="100" >

<rect x="0" y="0" width="100" height="50"
style="stroke:none; fill: #ffffff"/>


<rect x="0" y="50" width="100" height="50"
style="stroke:none; fill: #666666"/>

</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>

<rect x="1" y="1" width="100" height="100"
style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>

</svg>

运行效果:

四、在蒙版中使用渐变

如果对用作蒙版的形状应用渐变,则可以实现蒙版所应用的形状的渐变透明度。

使用渐变的蒙版,使用蒙版的矩形以及该矩形下的文本,因此可以看到其透明度如何随着蒙版的渐变而变化。

例:

<svg width="500" height="120">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
<stop offset="100%" stop-color="#000000" stop-opacity="1" />
</linearGradient>

<mask id="mask4" x="0" y="0" width="200" height="100">
<rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)" />
</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #FF0000; mask: url(#mask4)" />
</svg>

运行效果:

注:渐变蒙版可以与其他效果(例如填充图案)结合使用。

SVG代码:

<svg width="500" height="120">
<defs>

<linearGradient id="gradient2"
x1="0%" y1="0%"
x2="100%" y2="0%"
spreadMethod="pad">

<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="1"/>
</linearGradient>


<pattern id="pattern2"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >


<circle cx="10" cy="10" r="10" style="stroke: none; fill: #FF0000; " />

</pattern>

<mask id="mask6" x="0" y="0" width="200" height="100" >
<rect x="0" y="0" width="200" height="100"
style="stroke:none; fill: url(#gradient2)"/>

</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>

</svg>

运行效果:

注:其中可见矩形使用填充图案作为填充,并在其蒙版中使用渐变。

要显示的矩形如何引用其CSS属性中的fill填充图案,以及如何引用其CSS属性中的mask蒙版。

五、在蒙版中使用填充图案

也可以在蒙版中使用填充图案,从而使蒙版成为填充图案的形状。

例:

<svg width="500" height="120">
<defs>
<pattern id="pattern1"
x="10" y="10" width="20" height="20"
patternUnits="userSpaceOnUse" >


<circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
</pattern>

<mask id="mask5" x="0" y="0" width="200" height="100" >
<rect x="0" y="0" width="200" height="100"
style="stroke:none; fill: url(#pattern1)"/>

</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
style="stroke: none; fill: #FF0000; mask: url(#mask5)"/>

</svg>

运行效果

注:矩形现在是半透明的,其中填充图案绘制了圆圈,而在其他位置完全透明。

六、总结

本文基于HTML基础,介绍了SVG中蒙版的应用。定义不同形状的蒙版,设置蒙版的不透明度,蒙版中使用渐变,以及蒙版应用填充图案。都通过项目,进行详细的讲解。

希望能够帮助你更好的学习。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

前端进阶学习交流.jpg

推荐 0
本文由 dcpeng 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册