当前位置: 首页 > 后端技术 > Python

一篇文章带你了解SVG遮罩(Mask)

时间:2023-03-26 12:27:51 Python

SVG遮罩功能,给一个SVG形状应用遮罩。遮罩决定SVG形状的哪些部分可见,以及透明度。RunningEffects可以将SVG遮罩视为更高级版本的剪切路径。1、简单掩码代码分析:本例使用ID=mask1定义掩码。元素内部是一个元素。元素定义遮罩的形状。定义了一个使用掩码的元素,元素使用CSS样式属性mask在内部引用maskID属性。示例:注意:要显示的矩形高度为100像素,但垂直前50个像素是可见的。那是因为蒙版矩形只有50像素高。该矩形仅在遮罩矩形覆盖的部分可见。黑色轮廓矩形是没有遮罩的矩形的大小。2.其他形状的遮罩你可以使用任何SVG形状作为遮罩。使用圆圈作为遮罩。运行效果:注意:遮罩圈可见的地方只能看到引用遮罩的矩形。3.遮罩形状颜色定义遮罩不透明度1\。如何定义不透明度?遮罩形状(圆形或矩形)的填充颜色设置为#ffffff。蒙版形状的颜色定义了使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff(白色),蒙版形状就越不透明。蒙版形状的颜色越接近#000000(黑色),蒙版形状越透明。2\.遮罩由两个不同颜色的矩形组成的情况(#ffffff和#66666)。遮罩适用于单个矩形,因此运行效果可以使用遮罩来查看遮罩中的两个不同形状如何影响同一形状。此文本位于矩形下方运行效果:4.在蒙版中使用渐变如果将渐变应用于用作蒙版的形状,则可以实现蒙版所应用的形状的渐变透明度。使用渐变蒙版、蒙版矩形和矩形下方的文本,这样您就可以看到它的透明度如何随着蒙版渐变而变化。示例:这个文本在矩形下方实际效果:注意:渐变蒙版可以与填充图案等其他效果结合使用。SVG代码:此文本在形状下方</svg>运行效果:注意:可见矩形使用填充图案作为填充,并在其遮罩中使用渐变。如何在其CSS属性中引用fillfillpattern,如何在其CSS属性mask中引用mask。5.在蒙版中使用填充图案你也可以在蒙版中使用填充图案,让蒙版成为填充图案的形状。示例:这段文字在矩形下方运行效果注:矩形现在在填充图案画圆的地方是半透明的,在其他地方是完全透明的。6.小结本文基于HTML基础,介绍蒙版在SVG中的应用。定义不同形状的蒙版,设置蒙版的不透明度,在蒙版中使用渐变,并将填充图案应用于蒙版。所有这些都通过项目进行了详细解释。希望能帮助你更好的学习。想深入了解Python网络爬虫和数据挖掘,可以去专业网站:http://pdcfighting.com/想深入了解Python网络爬虫和数据挖掘,可以去专业网站:http://pdcfighting.com/网站:http://pdcfighting.com/