如何在SVG中将选定区域外的元素（含部分元素）改为灰色？

核心思路 #

完全基于SVG内置滤镜实现，通过遮罩+颜色矩阵组合，让选中区域保留彩色，外部统一转灰度。这种方案不依赖外部CSS，导出为独立图片时效果不会丢失。

具体代码实现 #

下面是可直接复用的示例，你只需要替换动态生成的图形内容，以及动态更新选中区域的遮罩即可：

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义核心滤镜 -->
  <filter id="grayscaleOutside" x="0" y="0" width="100%" height="100%">
    <!-- 第一步：将整个图形转为灰度 -->
    <feColorMatrix in="SourceGraphic" type="matrix"
                   values="0.2126 0.7152 0.0722 0 0
                           0.2126 0.7152 0.0722 0 0
                           0.2126 0.7152 0.0722 0 0
                           0      0      0      1 0" 
                   result="grayscaleLayer"/>
    <!-- 第二步：用遮罩提取选中区域的原色内容 -->
    <feComposite in="SourceGraphic" in2="selectionMask" operator="in" result="colorLayer"/>
    <!-- 第三步：把原色层叠加到灰度层上 -->
    <feComposite in="colorLayer" in2="grayscaleLayer" operator="over"/>
  </filter>

  <!-- 动态生成的彩色图形组，应用滤镜 -->
  <g filter="url(#grayscaleOutside)">
    <!-- 示例图形，替换为你的动态内容即可 -->
    <circle cx="150" cy="200" r="80" fill="#ff4444"/>
    <rect x="250" y="120" width="180" height="160" fill="#44ff44" rx="10"/>
    <ellipse cx="450" cy="200" rx="70" ry="90" fill="#4444ff"/>
  </g>

  <!-- 选中区域遮罩（动态更新这里的白色图形即可） -->
  <mask id="selectionMask">
    <!-- 全黑背景：表示默认区域转灰度 -->
    <rect x="0" y="0" width="100%" height="100%" fill="black"/>
    <!-- 白色图形：选中的保留彩色的区域，可替换为任意路径/形状 -->
    <rect x="220" y="100" width="220" height="180" fill="white"/>
  </mask>
</svg>

关键细节 #

• 动态更新选中区域：用户选区域时，只需要修改<mask>里的白色图形（比如换成圆形、不规则路径），就能实时切换效果。
• 部分区域处理：如果图形只有一部分在选中区内，滤镜会自动处理边缘混合，不需要额外逻辑。
• 导出兼容性：所有效果都内嵌在SVG中，导出为PNG、JPG或保存为独立SVG文件时，效果完全保留。

内容的提问来源于stack exchange，提问作者azangru