Question

在将过滤器应用于svg图像时遇到问题。我只想对图像应用泛洪滤镜，但是当我设置该滤镜时，它会覆盖比图像更大的区域，似乎增加了图像的大小。有没有办法来解决这个问题？运行下面的代码片段以查看问题。

需要注意的一件事：图像的高度未知

image {
  outline: 3px solid red;
  outline-offset: -3px;
}

image.flood {
  filter: url(#floodFilter);
}

<svg width="500" height="200" viewBox="0 0 500 200">
  <defs>
    <filter id="floodFilter" filterUnits="objectBoundingBox">
      <feFlood flood-color="lightblue" flood-opacity="1"></feFlood>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend>
    </filter>
  </defs>
  <image x="0" y="30" width="200" href="https://www.fillmurray.com/g/200/140">   </image> 
  <image class="flood" x="230" y="30" width="200" href="https://www.fillmurray.com/g/200/140"></image>
</svg>

Answer 1

只需给过滤器一个明确的界限，即要填充的对象的确切大小即可。

默认情况下，边界比对象大10％，以便可以使用阴影。

请注意，要使图像跨浏览器工作，它们将需要高度属性。

image {
  outline: 3px solid red;
  outline-offset: -3px;
}

image.flood {
  filter: url(#floodFilter);
}

<svg width="500" height="200" viewBox="0 0 500 200">
  <defs>
    <filter id="floodFilter" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
      <feFlood flood-color="lightblue" flood-opacity="1" result="floodFill"></feFlood>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend>
    </filter>
  </defs>
  <image x="0" y="30" height="140" width="200" href="https://www.fillmurray.com/g/200/140">   </image> 
  <image class="flood" x="230" y="30" height="140"  width="200" href="https://www.fillmurray.com/g/200/140"></image>
</svg>

带有过滤器的SVG图像-过滤器覆盖的区域大于图像

1 个答案: