5

我正在寻找关于 Gecko 浏览器/Firefox 中是否有等效于 -webkit-mask 的可靠答案？

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

非常感谢！

4

4 回答 4

5

如果你的目标是 Firefox，它有很好的 SVG 支持，所以你现在可以使用 SVG 掩码而不是 CSS。这是 Mozillas 关于如何在 SVG Webkit 中制作蒙版的文档 蒙版不是标准轨道 - 所以我个人怀疑您是否会在跨浏览器中看到它们。

于 2011-05-04T17:59:27.240 回答
3

在为此苦苦挣扎了几个小时后，我终于能够在我的网站上应用一个复杂的 SVG 路径作为 div 元素的掩码，并且它可以在 Firefox 中使用。这是我所做的：

首先，对于 Webkit 浏览器，该解决方案是理想的，我只需要制作一个与我想要屏蔽的 div 大小相同（或实际上相同的形状，可能是不同的比例）的扁平 png 文件，并且我的区域想要以黑色显示，而我想要剪掉的部分是透明的。然后，我在 CSS 中为要屏蔽的 div 元素添加了以下行：

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

那很简单！现在让我们来看看让这个在 Firefox 中工作的有趣部分。要使此方法起作用，矢量形状必须与您要遮盖的区域的大小完全相同。所以我的蒙版是在 Fireworks 中设计的相对复杂的矢量路径，我需要将其转换为 SVG 路径，幸运的是，我有 Illustrator 可用。否则，请使用您最喜欢的 SVG 编辑器将您的形状路径转换为 ​​SVG。如果您还使用 Fireworks 绘制矢量形状，您可以右键单击要使用的矢量形状，转到“编辑”->“复制路径轮廓”，然后将其粘贴到足够大的在 Illustrator 或您使用的任何 SVG 编辑器中创建文档。

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

因此，现在使用文本编辑器（例如文本编辑器或记事本）打开您刚刚创建的 SVG 文件。您会看到一些 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>

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

mask: url("#maskid");

而已。现在应该将路径作为掩码应用到您指定的元素。

于 2012-03-10T21:02:08.250 回答
1

这是诀窍，您需要将 svg 文件中生成的所有点转换为等于点路径除以掩码尺寸的比率。

为了更容易解释，我制作了一个快速工具来帮助设计师将他们的 svg 转换为与 firefox 兼容的掩码，您可以在我的网站 ( http://www.prollygeek.com ) 上看到现场演示，例如 facebook logo 和 twitter logo 只是掩码，这里是您可以用来将 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);

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

于 2013-11-23T16:44:46.043 回答
0

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

于 2011-05-04T17:44:20.010 回答