vue svg 使用filter后怎么只显示一个图片

如果您想将多个 SVG 图像应用于同一 SVG filter，但只想显示一个结果图像，则可以将这些图像放置在单个 <g> 元素中。然后，将该元素的“filter”属性设置为您想要应用的滤镜 ID。这将导致所有包含在该元素中的 SVG 图像都共享相同的滤镜。以下是示例代码：

<svg width="400" height="400">
  <defs>
    <filter id="myFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
  <g filter="url(#myFilter)">
    <image xlink:href="image1.svg" x="0" y="0" width="200" height="200"/>
    <image xlink:href="image2.svg" x="200" y="0" width="200" height="200"/>
  </g>
</svg>

在上面的示例中，我们定义了一个名为“myFilter”的 SVG 滤镜，并将其应用于包含两个图像的 <g> 元素。这将导致两个图像都共享相同的模糊效果，并且只会显示一个结果图像。