svg蒙版

Question

老师我想请问一下，视频课程中给蒙版元素也就是<mask>中的<rect>标签增加fill属性有什么意义，我查阅了一下文章和自己实践<mask>标签中的元素无非就是透明和不透明。设置任何颜色是没有效果的好像，比如下面一段代码：

```
 <svg
            width="400"
            height="400"
        >
            <defs>
                <mask id="mask">
                    <rect
                        fill="red"
                        x="0"
                        y="0"
                        width="200"
                        height="200"
                    ></rect>
                </mask>
            </defs>
            <rect
                mask="url(#mask)"
                fill="blue"
                x="100"
                y="100"
                width="100"
                height="100"
            ></rect>
        </svg>

```

结果是这样的：

他和

<mask id="mask">
<rect
fill="green"
x="0"
y="0"
width="200"
height="200"
></rect>
</mask>

效果是一模一样的，老师能详细解释下吗。实在是没有明白svg蒙版

Answer 1

扬_灵 2020-09-23 10:58:47

同学你好，蒙版中的fill对应的不是真实颜色，而是不同的透明度，你把fill写成#fff，相当于透明度0，你把fill写成#000，相当于透明度1，使用颜色的话代表的是透明的程度，但是这种算法不精确，比较好的实践是将fill设为#fff，然后控制opacity，这样就可以精确控制了。