在 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>
group 只是在 MASKED 图像在 x 或 y 维度上小于 MASKING 图像时提供背景;它不会影响我遇到的屏蔽问题,因为我已经尝试过两种方法。
我很困惑,感谢任何帮助!
最佳答案
SVG 1.1 使用luminance masks 。一个简单但有些不准确的解释是:蒙版图像中的白色表示完全不透明,黑色表示完全透明。更多解释here 。一些带有图像的蒙版的更高级示例,请参阅 here .
Alpha 蒙版已 proposed和 accepted as a requirement对于 SVG2。
关于image - 如何在 SVG 中控制从两个图像创建的图像蒙版输出的不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11019402/