跨浏览器 CSS 掩码答案

【问题标题】：cross browser css mask跨浏览器 CSS 掩码
【发布时间】：2020-11-27 15:59:36
【问题描述】：

我正在尝试在带有和图像的 svg 中的 css 中创建一个 mask。

--> 我在 2 个 svg 之间插入一张图片（在一个文件中）

我已经添加了一个类 crop-image 像这样

<image id="image-front" xlink:href="" class="crop-image" />

这是我的课：

mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
-webkit-mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
height: 100%;
width: auto;

此代码在 Firefox 上运行良好，但在 chrome 或 safari 中无法运行。我的 svg 中没有调用该类，但即使我在我的 svg 中手动复制该类，它也不起作用

【问题讨论】：

标签： css svg cross-browser

【解决方案1】：

CSS 中的遮罩是使用 mask-image 属性完成的，并且必须提供图像作为遮罩。图像蒙版中任何 100% 黑色的东西都是完全可见的，任何 100% 透明的东西都将被完全隐藏，中间的任何东西都会部分遮盖图像。 CSS 中的线性和径向渐变是生成的图像，因此它们可以用作图像遮罩。使用 mask 元素的 SVG 也可以用作图像掩码。

【讨论】：

【解决方案2】：

根据caniuse，在Firefox 之外不支持mask。对于 Chrome 和 Safari，您可以使用mask-image。

【讨论】：