更改区域外元素的颜色

Question

您能帮我在svg中实现以下效果吗？

svg 由网络应用程序动态生成，包含各种彩色形状。当用户选择 svg 内的区域时，所选区域之外的所有形状（包括形状的一部分）应将其颜色更改为相同的灰色阴影，如下图所示：

选择前：

应用选择后：

我不想使用 CSS 过滤器，因为我可能需要能够将此 svg 导出为独立图像。所以我想到了 svg 过滤器；但我一直在努力设置它们。

Answer 1

这是我自己实现这种效果的粗略尝试，可能会成功。

初始 svg：

<svg viewBox="0 0 900 400"
  style="width: 900px; height: 400px; border-style: dashed; border-width: 1px; border-color: black; width: 550px">
  <text x="410" y="100" font-size="30">Testing</text>
  <circle cx="450" cy="200" r="50" fill="red" />
  <circle cx="250" cy="200" r="30" fill="green" />
  <circle cx="750" cy="200" r="20" fill="blue" />
</svg>

具有所需效果的Svg：

  <svg viewBox="0 0 900 400"
    style="width: 900px; height: 400px; border-style: dashed; border-width: 1px; border-color: black; width: 550px">
    <filter id="grayscale">
      <feFlood flood-color="#ccd3d8" flood-opacity="1" x="0" y="0" height="400" width="420" result="A"/>
      <feFlood flood-color="#ccd3d8" flood-opacity="1" x="475" y="0" height="400" width="420" result="D"/> 
      <feComposite operator="in" in2="SourceGraphic" in="D" result="C"/>
      <feComposite operator="in" in2="SourceGraphic" in="A" result="B"/>
      <feMerge>
        <feMergeNode in="B" />
        <feMergeNode in="C" />
      </feMerge>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>

    <g filter="url(#grayscale)">
      <text x="410" y="100" font-size="30">Testing</text>
      <circle cx="450" cy="200" r="50" fill="red" />
      <circle cx="250" cy="200" r="30" fill="green" />
      <circle cx="750" cy="200" r="20" fill="blue" />
    </g>
  </svg>