【发布时间】：2014-03-26 21:37:49
【问题描述】：
我想展示一张图片并在其上应用一个遮罩，这会使整个图像变暗，但一些区域会保留图像的原始内容。 就像使用带孔的面具一样。
我尝试了很多选择，但都无法奏效。 这是我得到的最接近的：
<image id="image1" xlink:href="image.png" height="100%" width="100%" />
<g if="image1mask" >
<circle id="image1maskhole" cx="160" cy="120" r="80" fill="black" fill-opacity="100%" />
<rect id="image1maskbase" x="0" y="0" width="100%" height="100%" fill="rgb(100, 100, 100)" fill-opacity="30%" comp-op="dst-out"/>
</g>
但是，蒙版中的圆圈已填充（黑色）。我希望它完全透明。 我尝试使用白色代替，但结果也是错误的。 我也尝试使用填充不透明度值，但我也无法使其工作。
我正在 chrome 上进行测试，但我将在不能很好地处理掩码的嵌入式浏览器中运行它。这就是为什么我要避免这种可能的解决方案（在 chrome 上完美运行）：
<defs>
<mask id="image1mask" >
<rect x="0" y="0" width="100%" height="100%" fill="white" fill-opacity="30%" />
<polygon points="30,30, 80,30, 50,120, 80,210, 30,210" fill="white" />
<circle cx="160" cy="120" r="80" fill="white" />
<rect x="250" y="30" width="50" height="180" fill="white" />
</mask>
</defs>
<image id="image1" xlink:href="image.png" height="100%" width="100%" mask="url(#image1mask)" />
有人可以帮忙吗？
非常感谢。
---- 可能的解决方案：
我找到了一种方法。这实际上是一种解决方法，我有点担心性能。 我将它嵌入到 JavaFX2 应用程序中。不幸的是，它不能很好地工作。 掩码实际上将被解释为一个矩形，其中包含 mask1 的所有项目。 所以回到开头。
<svg class="svg-graphic" width="320" height="240" >
<defs>
<clipPath id="mask1">
<polygon points="30,30, 80,30, 50,120, 80,210, 30,210" fill="white" />
<circle cx="160" cy="120" r="80" fill="white" />
<rect x="250" y="30" width="50" height="180" fill="white" />
</clipPath>
</defs>
<image id="backimage" xlink:href="image.png" height="100%" width="100%" style="opacity:0.3" />
<image id="imagemask" xlink:href="image.png" height="100%" width="100%" clip-path="url(#mask1)"/>
</svg>
-- 另一种可能的解决方案：这个适用于嵌入式浏览器。
唯一的缺点是它使用了很多“假”图像。一个用于背景（阴影），一个用于遮罩中的每个孔（非阴影部分）。再一次，性能可能会受到影响。
<svg class="svg-graphic" width="320" height="240" >
<image id="image1back" xlink:href="image.png" height="100%" width="100%" style="opacity:0.3" />
<g id="mask4" visibility="visible">
<defs>
<clipPath id="mask4def-1"><polygon points="30,30, 80,30, 50,120, 80,210, 30,210" /></clipPath>
<clipPath id="mask4def-2"><circle cx="160" cy="120" r="50" /></clipPath>
<clipPath id="mask4def-3"><rect x="250" y="30" width="50" height="180" /></clipPath>
</defs>
<image xlink:href="image.png" height="100%" width="100%" clip-path="url(#mask4def-1)"/>
<image xlink:href="image.png" height="100%" width="100%" clip-path="url(#mask4def-2)"/>
<image xlink:href="image.png" height="100%" width="100%" clip-path="url(#mask4def-3)"/>
</g>
</svg>
它将产生与我在上面给出的掩蔽方法相同的结果（在我的嵌入式浏览器中不起作用）。 有谁知道这是否是一个有问题的方法？ 谁有更好的想法？
【问题讨论】：
-
我假设您的嵌入式浏览器不支持 SVG 过滤器？
-
当你说 JavaFX WebView“不能很好地处理掩码”时，你是什么意思？
标签： svg