2

在 SVG 中使用两个图像创建图像蒙版时，如何保持图像的不透明度？如下图所示，图像几乎是透明的——它应该是完全不透明的。为什么会发生这种情况，如何强制蒙面产品具有 100% 的不透明度？

这是我得到的结果：

在此处输入图像描述

这是我正在使用的蒙版图像： 在此处输入图像描述

这是我的代码（对 PHP 变量感到抱歉）：

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

仅供参考：组<rect>中<g>的 只是当 MASKED 图像在 x 或 y 维度上小于 MASKING 图像时提供背景；它不会影响我遇到的掩蔽问题，因为我已经尝试过两种方式。

我很难过，感谢任何帮助！

4

1 回答 1

4

SVG 1.1 使用亮度遮罩。一个简单且有些不准确的解释是：蒙版图像中的白色表示完全不透明，黑色表示完全透明。这里有更多的解释。一些更高级的带有图像的蒙版示例，请参见此处。

Alpha 掩码已被提议并被接受为 SVG2 的要求。

于 2012-06-13T21:47:49.503 回答