Question

我正在寻找一个关于Gecko browser / Firefox中是否有与-webkit-mask相同的答案的可靠答案？

如果没有，有没有办法将CSS中的-webkit-mask降级为直接的背景图像处理，还是应该放弃并使用Javascript？

非常感谢！

Answer 1

如果您的目标是Firefox，它具有出色的SVG支持，因此您现在可以使用SVG掩码而不是CSS。 Here is Mozillas documentation on how to do a mask in SVG Webkit掩码不是标准跟踪 - 所以我个人怀疑你会看到它们跨浏览器。

Answer 2

经过几个小时的努力，我终于能够在我的网站上应用复杂的SVG路径作为div元素的掩码，它可以在Firefox中运行。这是我做的：

首先，对于Webkit浏览器，解决方案是理想的，我只需要制作一个扁平的png文件，其大小相同（或者形状相同，可能是不同的比例），就像我要掩盖的div一样，并且我希望以黑色显示的区域，以及我想要剪裁的部分是透明的。然后，我将以下行添加到我要屏蔽的div元素的CSS中：

-webkit-mask-box-image: url(path/to/mask.png);

这很简单！现在让我们来看看在Firefox中使用它的有趣部分。要使此方法起作用，矢量形状必须与要屏蔽的区域完全相同。所以我的面具是一个在Fireworks中设计的相对复杂的矢量路径，我需要将它转换为SVG路径，谢天谢地，我有Illustrator可用。否则，使用您喜欢的SVG编辑器将形状路径转换为SVG。如果您还使用Fireworks绘制矢量形状，可以右键单击要使用的矢量形状，转到“编辑” - ＆gt; “复制路径轮廓”，然后您可以将其粘贴到Illustrator中的足够大的文档中，或者您正在使用的任何SVG编辑器中。

接下来，您需要将其导出到SVG文件。在Illustrator中，我使用了“导出为Web”功能，选择了SVG格式1.0版，并将其导出到SVG文件中。位置和文档大小并不重要，因为我们只是在路径描述之后，我们将丢弃其余的。

因此，现在打开您刚刚使用文本编辑器创建的SVG文件，例如Text Edit或Notepad。你会看到一些XHTML格式的内容，特别是一个元素就像：

<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>

对于复杂的形状，d="..."部分可能会长很多行。这是我们关心的这个SVG文件的唯一部分。

接下来，我们必须将描述此路径的SVG掩码嵌入到我们的网站HTML中。首先，让我们在HTML中添加以下元素：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="maskid" maskUnits="userSpaceOnUse"> 
            <path fill="white" d=""/>
        </mask>
    </defs>
</svg>

现在，我们只是从我们之前保存的SVG文件中复制路径元素的d=""属性的内容（即M0,43v0 ...）并粘贴到相同的d=""属性中嵌入式SVG掩码元素中的path元素。然后，我们可以将以下条目添加到我们想要屏蔽的元素的CSS中：

mask: url("#maskid");

就是这样。现在，该路径应作为掩码应用于您指定的元素。

Answer 3

这是技巧，您需要将svg文件中生成的所有点转换为等于点路径除以遮罩尺寸的比率。

为了便于解释，我已经制作了一个快速工具来帮助设计师将他们的svg转换为与firefox兼容的面具，你可以在我的网站上看到一个现场演示（http://www.prollygeek.com），例如facebook logo ，和twitter徽标只是面具，这里是你可以用来将你的svg转换为面具的工具： http://prollygeek.com/svg-mask/

例如：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>

将转向：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>

请不要忘记添加此属性style =“fill-rule：evenodd; clip-rule：evenodd; fill：#ffffff;”

并填充任何颜色，无所谓。

然后将你的面具链接到你想要的css元素：

例如：

  mask:url(images/fb.svg#fb);

计算器可以免费使用，但请不要在其他任何地方复制或发布。

Answer 4

您可以将带有css的svg过滤器应用于Gecko中的HTML内容。 Here是一个喜欢摆弄mozilla代码的人的例子。从2008年开始，它可能有点过时了。

Gecko是否等同于-webkit-mask或Gecko浏览器降级的奇特方式？

4 个答案: