Firefox中的“面具"问题 [英] problems with 'mask' in firefox
问题描述
我在这里尽头了.这个面具"应该起作用吗?好吧，我开始怀疑.我的示例在http://50.63.191.172/mask.html.
I'm at the end of my rope here. This 'mask' should work right? Well, I'm beginning to doubt. My example is at http://50.63.191.172/mask.html.
我真的不知道我还能尝试什么.我确实有一些限制:
I really don't know what else I could try. I do have some constraints:
- 我想将svg放在任何html页面/css样式表的外部，因为它将在多个地方使用.
- 我希望预先确定svg非大小，因为我不想为各种大小设置多个版本；应该只有一个，以便浏览器可以缓存它.
- 我无法在svg内部 中指定图像. svg是可应用于任何潜在图像的样式.
- I would like to have the svg external to any html page / css stylesheet because it will be used from multiple places.
- I would like to have svg non size predetermined, because I don't want to have multiple versions for various sizes; there should be only one, so that it can be cached by browsers.
- I can't have the image specified inside the svg. The svg is a styling to be applied to any potential image.
我已经尝试了多种方法来完成这项工作，但到目前为止还没有运气.使用它们的'-webkit-mask'属性，它在Chrome/Safari中可以正常工作.如果我以绝对像素(而不是100％)指定遮罩矩形的宽度和高度，则使用Firefox和遮罩"取得了一些"成功.我什至想要做些什么(firefox中的自动缩放蒙版)?如果是，我想念什么?
I've tried multiple ways to make this work but no luck so far. It works just fine in Chrome/Safari using their '-webkit-mask' property. I've had "some" success with firefox and 'mask' if I specify the width and height of the masking rect in absolute pixels, but not as 100%. Is what I want even doable (an auto-scaling mask in firefox)? If yes, what am I missing?
令人沮丧的部分是，有时如果我继续重新加载页面，图像将显示为无遮罩，仅在完成显示后立即被擦除.
The frustrating part, sometimes if I keep reloading the page, the images appear unmasked, only to be wiped off immediately after finish displaying.
这是我的svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="c1">
<g id="group">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</g>
</mask>
</defs>
<use xlink:href="#group"/>
</svg>
这是我的html/css组合:
And this is my html/css combined:
<html lang="en">
<head>
<meta charset=utf-8>
<title>Testing mask in various browsers</title>
<style>
.masked {
mask: url(mask.svg#c1); /*Firefox */
-webkit-mask: url('mask.svg'); /*Chrome, Safari */
}
.nob {
border: none;
outline: none;
}
div.stage { position: relative; }
.inline
{
display: inline-block;
}
span.stage
{
background-repeat: no-repeat;
background-position: center;
display: inline-block;
position: absolute;
left: 0px;
top: 0px;
}
.big { width:600px; height:588px; }
.normal { width:300px; height:294px; }
.small { width:150px; height:147px; }
</style>
</head>
<body style="background-image: url(background.gif);">
<div class="stage inline big">
<a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a>
</div>
<div class="stage inline normal">
<a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a>
</div>
<div class="stage inline small">
<a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a>
</div>
</body>
</html>
我想念什么?
推荐答案
结果发现FF不执行百分比.相反，它喜欢以0到1之间的objectBoundingBox单位工作.Chrome/Safari不喜欢这样.但是有一种方法可以消除差异.这是我当前的工作版本，接下来我将对其进行优化.
Turns out FF doesn't do percent. Instead it likes to work in objectBoundingBox units between 0 and 1. Well, Chrome/Safari don't like that. But there is a way to split the difference. Here's my working current version which I will aim to optimize next.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<g id="group1">
<linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g1)" />
</g>
</mask>
<mask id="c2">
<g id="group2">
<linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" />
</g>
</mask>
</defs>
<use xlink:href="#group2"/>
</svg>
就这样吧，可以完成.
这篇关于Firefox中的“面具"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
