我已经束手无策了。这个“面具”应该有用吧？嗯，我开始怀疑了。我的示例位于 http://50.63.191.172/mask.html。
我真的不知道我还能尝试什么。我确实有一些限制:
- 我希望将 svg 放在任何 html 页面/css 样式表外部，因为它将在多个地方使用。
- 我想要预先确定 svg 非尺寸，因为我不想有不同尺寸的多个版本；应该只有一个，这样才能被浏览器缓存。
- 我无法在 svg 中指定图像。 svg 是一种可应用于任何潜在图像的样式。
我尝试了多种方法来实现此目的，但到目前为止还没有成功。它在 Chrome/Safari 中使用其“-webkit-mask”属性运行良好。如果我以绝对像素指定 mask 矩形的宽度和高度，但不是 100%，我在 Firefox 和“ mask ”方面取得了“一些”成功。我想要的是否可行(firefox 中的自动缩放蒙版)？如果是的话，我错过了什么？
令人沮丧的部分是，有时如果我不断重新加载页面，图像就会显示为未屏蔽，但在显示完毕后会立即被删除。
这是我的 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 组合:
<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 不喜欢这样。但有一种方法可以消除差异。这是我当前的工作版本，下一步我将对其进行优化。
<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 - Firefox 中的 'mask' 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16745742/