How do I retain the opacity of an image when creating an image mask using two images in SVG? As seen in the picture below, the image is nearly transparent - it should be completely opaque. Why is this happening, and how can I force the masked product to have 100% opacity?
Here is the result I am getting:
Here is the mask image I am using:
Here is my code (sorry about the PHP variables):
<svg width="'.$width.'" height="'.$height.'" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask'.$id.'" maskUnits="userSpaceOnUse"
x="0" y="0" width="'.$width.'" height="'.$height.'">
<image id="maskImg'.$id.'" x="0" y="0" width="'.$width.'px" height="'.$height.'px"
xlink:href="images/'.$treatment_url.'" >
</image>
</mask>
<g id="imgGroup'.$id.'">
<rect x="0" y="0" width="'.$width.'" height="'.$height.'" fill="rgba(30,30,30,0.2)" />
<image id="listingImg'.$id.'"
x="0" y="0" width="'.$width.'px" height="'.$height.'px"
xlink:href="'. $img_url .'">
</image>
</g>
</defs>
<use xlink:href="#imgGroup'.$id.'" mask="url(#mask'.$id.')" opacity="1" />';
</svg>
FYI: the <rect>
in the <g>
group is just to provide a background when the MASKED image is smaller in the x or y dimension than the MASKING image; it does not affect the masking problem I'm having, as I've tried it both ways.
I'm stumped, and appreciate any help!
SVG 1.1 uses luminance masks. A simple and somewhat inaccurate explanation is: White in the mask image gives fully opaque, black gives fully transparent. Some more explanations here. Some more advanced examples of masks with images, see here.
Alpha masks have been proposed and accepted as a requirement for SVG2.