当前位置：文江博客话题详情

是否有与 -webkit-mask 等效的 Gecko 或 Gecko 浏览器降级的奇特方式？

发布于 2024-11-05 17:01:01 字数 143 浏览 4 评论 0原文

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

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

多谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疾风者 2024-11-12 17:01:01

如果您的目标是 Firefox，它具有出色的 SVG 支持，因此您现在可以使用 SVG 蒙版而不是 CSS。这是关于如何在 SVG 中制作遮罩的 Mozillas 文档 Webkit 遮罩不是标准轨道 - 所以我个人有疑问你将永远看到他们跨浏览器。

回复收藏 0 原文

孤凫 2024-11-12 17:01:01

经过几个小时的努力，我终于能够在我的网站上应用复杂的 SVG 路径作为 div 元素的遮罩，并且它可以在 Firefox 中使用。这就是我所做的：

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

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

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

接下来，您需要将其导出为 SVG 文件。在 Illustrator 中，我使用“导出为 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>

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

mask: url("#maskid");

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

After struggling with this for many hours, I was finally able to apply a complex SVG path as a mask for a div element on my site, and it works in Firefox. Here's what I did:

First, for Webkit browsers, the solution was ideal, and I simply had to make a flattened png file with the same size (or really the same shape, could be different scale) as the div I want to mask, and with the area I want to be visible in black, and the parts I want clipped out transparent. Then, I added the following line to the CSS for the div element I want to mask:

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

That was easy! Now let's get to the fun part of getting this working in Firefox. For this method to work, the vector shape must be the exact same size as the area you want to mask. So my mask is a relatively complex vector path designed in Fireworks, and I need to get it converted to an SVG path, and thankfully, I have Illustrator available. Otherwise, use your favorite SVG editor to convert your shape path to SVG. If you're also using Fireworks to draw your vector shapes, you can right-click on the vector shape you want to use, go to 'Edit' -> 'Copy Path Outlines', and then you can paste it into a sufficiently large document in Illustrator, or whatever SVG editor you're using.

Next, you need to export it to an SVG file. In Illustrator, I used the 'Export for Web' function, selected SVG format, version 1.0, and exported it to an SVG file. The position and document size don't really matter, as we're just after the path description, and we'll discard the rest.

So, now open that SVG file you just made with a text editor, such as Text Edit or Notepad. You'll see some XHTML-formatted content, and one element in particular is something like:

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

The d="..." portion will probably be many lines long for a complex shape. This is the only portion of this SVG file that we care about.

Next, we must embed an SVG mask describing this path into our site HTML. First, let's add the following elements to our 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>

Now, we simply copy the contents of the d="" property of the path element from the SVG file we saved earlier (i.e. M0,43v0...) and paste into the same d="" property of the path element in the embedded SVG's mask element. Then, we can add the following entry to the CSS for the element we want to mask:

mask: url("#maskid");

That's it. The path should now be applied as a mask to the element you specified.

回复收藏 0 原文

亽野灬性zι浪 2024-11-12 17:01:01

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

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

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

Here is the trick , you need to convert all points generated in your svg file to ratio that is equal the point path divided by mask dimension .

For easier explaination , i have made a quick tool to help designers convert their svg into a mask that is compatible with firefox , you can see a live demo on my website ( http://www.prollygeek.com ) , for example the facebook logo , and twitter logo are just masks , and here is the tool that you can use to convert your svg to a mask:
http://prollygeek.com/svg-mask/

for example:

<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"/>

will be turned to:

<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;"/>

Please dont forget to add this attribute style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"

and fill with any color , it doesnt matter.

afterwards link your mask to the css element you desire:

for example: