文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在SVG中控制从两个图像创建的图像蒙版输出的不透明度？

问如何在SVG中控制从两个图像创建的图像蒙版输出的不透明度？
EN

Stack Overflow用户

提问于 2012-06-14 00:35:22

回答 1查看 621关注 0票数 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>

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

我被难住了，感谢大家的帮助！

image

svg

transparency

masking

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-14 05:47:50

SVG1.1使用luminance masks。一个简单而有些不准确的解释是:蒙版图像中的白色给完全不透明，黑色给完全透明。更多的解释here。有关带有图像的蒙版的更多高级示例，请参阅here。

Alpha口罩已经被用于SVG2的proposed和accepted as a requirement。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11019402

复制

相似问题

问如何在SVG中控制从两个图像创建的图像蒙版输出的不透明度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中控制从两个图像创建的图像蒙版输出的不透明度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中控制从两个图像创建的图像蒙版输出的不透明度？
EN