Question

我希望显示图像并在其上方应用遮罩，这会使整个图像变暗，但许多区域会保留图像的原始内容。就像使用带孔的面具一样。

我一直在尝试很多选择，但我无法让它发挥作用。这是我最接近的：

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

- 另一种可能的解决方案：这个解决方案适用于嵌入式浏览器。

唯一的缺点是它使用了很多＆＃34;假的＆＃34;图片。一个用于背景（阴影），一个用于面具中的每个孔（非阴影部分）。再一次，表现可能会受到影响。

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

它将产生与我在上面给出的Masking方法相同的结果（在我的嵌入式浏览器中无法工作）。有谁知道这是否是一个有问题的方法？谁有更好的想法？

Answer 1

尝试这样的事情：

<defs>
  <mask id="image1mask" >
    <g>
      <rect id="image1maskbase" x="0" y="0" width="100%" height="100%" fill="rgb(100, 100, 100)" fill-opacity="30%" />
      <circle id="image1maskhole" cx="160" cy="120" r="80" fill="black" />
    </g>
  </mask>
</defs>

<image id="image1" xlink:href="image.png" height="100%" width="100%" mask="url(#imagemask)" />

Answer 2

我现在有点不清楚你想要阴影哪些位以及你想要清楚哪些位：/

我假设你想要＆＃34; KOI＆＃34;形状清晰，其余黑暗。这是一个不使用掩码的解决方案。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="240" >
    <defs>
        <clipPath id="mask1">
            <polygon points="30,30, 80,30, 50,120, 80,210, 30,210"/>
            <circle cx="160" cy="120" r="80" />
            <rect x="250" y="30" width="50" height="180" />
        </clipPath>
    </defs>

    <image xlink:href="http://placepuppy.it/320/240" height="100%" width="100%" />
    <rect height="100%" width="100%" fill="black" opacity="0.6" />
    <image xlink:href="http://placepuppy.it/320/240" height="100%" width="100%" clip-path="url(#mask1)"/>
</svg>

Demo here

还有一个只需要一个<image>元素的解决方案，但为此你需要结合＆＃34; KOI＆＃34;塑造成一个<path>元素。

Answer 3

BigBadaboom提供的两种解决方案在Chrome中运行良好。但是，我必须使用JavaFX2嵌入式浏览器，这些解决方案不能很好地工作。据我所知，它并没有很好地管理口罩。另一个限制与clippath中的多个项目有关。浏览器会将它们理解为一个更大的矩形，以容纳其中的所有项目。

我能在嵌入式浏览器中使用它的唯一方法是对图像进行叠加。我开始使用完全着色的基本图像。然后我添加一个图像，每个突出显示的部分都有一个剪辑路径。

到目前为止，性能尚可。但是，在使用普通浏览器时，我不建议任何人遵循这种方法。如果你在一个页面中多次使用它可能会慢一些。

<svg class="svg-graphic" width="320" height="240">http://placepuppy.it/320/240
    <image id="image1back" xlink:href="http://placepuppy.it/320/240" height="100%" width="100%" />
    <rect height="100%" width="100%" fill="black" style="opacity:0.6" />
    <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="http://placepuppy.it/320/240" height="100%" width="100%" clip-path="url(#mask4def-1)" />
        <image xlink:href="http://placepuppy.it/320/240" height="100%" width="100%" clip-path="url(#mask4def-2)" />
        <image xlink:href="http://placepuppy.it/320/240" height="100%" width="100%" clip-path="url(#mask4def-3)" />
    </g>
</svg>

Demo here

SVG：突出显示图像的多个部分（合成）

3 个答案: