如何使用 background 与 mask 来实现颜色混合动态化

在一些特殊场景下，我们可能需要使用SVG来展示一些复杂的情况比如六边形这种，当然css也可以实现，但是如果需要圆角弄起来还是有点麻烦的，而且自适应情况也不好。

但是使用SVG的问题就是颜色切换比较麻烦，尤其是存在多个颜色时，整体的色系切换会非常麻烦。

那我们今天就来解决一下这个问题，虽然这是一个小众问题，但是也算一个骚操作，挺有趣。

这里面需要用到的属性就是background和mask属性：

background就不用多介绍了，大家肯定用过，如果有一个div如果设置了background，不会影响到文字等内容的显示。

而mask用法与background完全一致，只是效果相反，设置了mask的元素内容会被遮盖住，不会显示。

那么当background和mask同时被设置时会发生什么呢？

首先我们准备一个六边形SVG，可以看到边框的颜色比较重，而中心的颜色比较浅。

SVG代码如下：

<svg viewBox="0 0 108 122" fill="none" xmlns="http://www.w3.org/2000/svg"
     class="absolute top-0 left-0 z-0 w-full h-full pointer-events-none select-none">
    <path d="M60.25 3.03109C56.3825 0.798179 51.6175 0.79818 47.75 3.03109L6.92245 26.6029C3.05494 28.8358 0.672451 32.9624 0.672451 37.4282V84.5718C0.672451 89.0376 3.05494 93.1642 6.92245 95.3971L47.75 118.969C51.6175 121.202 56.3825 121.202 60.25 118.969L101.078 95.3971C104.945 93.1642 107.328 89.0376 107.328 84.5718V37.4282C107.328 32.9624 104.945 28.8358 101.078 26.6029L60.25 3.03109Z"
          fill="rgba(228, 114, 36, 0.1)" stroke="#E47224"></path>
</svg>
​

然后我们创建一个div元素，将div的mask设置为SVG

代码如下：

<style>
.polygon6 {
    width: 200px;
    height: 200px;
    mask: url("polygon6.svg") no-repeat center;
}
</style>
<div class="polygon6">
</div>

代码也很简单，但是此时运行是显示不出来六边形的,因为只设置了mask如果不设置background时不会显示任何内容的。

接下来我们随便设置一个背景颜色比如#333

可以看到六边形已经显示了，并且颜色是我们设定的背景颜色。可以看到设置的背景色应用到较深的边框上，而中心区域的颜色色值比例和我们在svg中设置的是一致的。

因为本身mask属性主要就是用于和背景的融合，所以我们可以通过这个来解决一些颜色难以设置的情况。但是问题是使用过mask后，元素内的文字不再显示。

可以在这里试试效果：

参考链接： mask