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:
- 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.
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.
Here's my 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>
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>
What am I missing?
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>
So it goes, it can be done.
来源：https://stackoverflow.com/questions/16745742/problems-with-mask-in-firefox