mask遮罩中四个属性命令的含义

Posted 2023-03-02

参考技术A add：遮罩累加。subtract：遮罩相减，也就是遮罩图片重合的地方不显示。intersect：遮罩相交，也就是遮罩图片重合的地方才显示遮罩。exclude：遮罩排除，也就是后面遮罩图片重合的地方排除，当作透明处理。
mask-clip的默认值是border-box，而且支持多属性值，例如：mask-clip：content-box，border-box。虽然支持的属性值挺多，但是对于普通元素而言，生效的其实就前面4个，Firefox浏览器还支持no-clip。fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。
mask-mode属性的默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。例如，如果我们的遮罩使用的是SVG中的defs中的mask元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度遮罩。如果是其他场景，则计算值是alpha，表示基于透明度遮罩。