如何让SVG的feFlood滤镜仅作用于填充而不影响描边？

要让<feFlood>滤镜仅作用于元素的填充而不影响描边，有两种可靠的实现方式：

方法1：拆分填充与描边为独立元素 #

将矩形的填充和描边拆分成两个独立的<rect>元素：一个承载填充并应用滤镜，另一个仅负责描边且不添加滤镜。这种方式逻辑直观，易于维护。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 600">
    <defs>
      <filter id="filt">
        <feFlood flood-color="red" flood-opacity=".5"></feFlood>        
      </filter>
    </defs>
    <rect class="bg" x="0" y="0" width="1280" height="600" fill="#EFEFEF"></rect>
    <!-- 仅填充+滤镜 -->
    <rect class="elementFill" x="100" y="100" width="300" height="200" filter="url(#filt)"></rect>
    <!-- 仅描边，无滤镜 -->
    <rect class="elementStroke" x="100" y="100" width="300" height="200" fill="none" stroke="black" stroke-width="5"></rect>
</svg>

说明：

• 第一个<rect>只处理填充，应用滤镜后不会影响描边；
• 第二个<rect>设置fill="none"，仅保留描边属性，完全不受滤镜影响；
• 移除feFlood的x/y/width/height属性，滤镜会自动匹配目标元素的尺寸，无需手动指定。

方法2：在滤镜中复合原元素的填充区域 #

通过滤镜内部的<feComposite>，让feFlood生成的颜色仅作用于原元素的填充部分，保留描边的原始状态。这种方式无需拆分元素，适合复杂场景。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 600">
    <defs>
      <filter id="filt">
        <!-- 生成红色半透明填充色 -->
        <feFlood flood-color="red" flood-opacity=".5" result="floodColor"/>
        <!-- 提取原元素的填充区域（排除描边） -->
        <feComposite in="SourceGraphic" in2="SourceGraphic" operator="in" result="fillArea"/>
        <!-- 将flood颜色与填充区域复合，保留原描边 -->
        <feComposite in="floodColor" in2="fillArea" operator="in"/>
      </filter>
    </defs>
    <rect class="bg" x="0" y="0" width="1280" height="600" fill="#EFEFEF"></rect>
    <rect class="elementRect" x="100" y="100" width="300" height="200" stroke="black" stroke-width="5" filter="url(#filt)"></rect>
</svg>

说明：

• feComposite in="SourceGraphic" operator="in"：提取原元素的填充区域，自动排除描边部分；
• 最后一步将feFlood的颜色与填充区域复合，只替换填充部分，描边会保留原始的黑色和宽度；
• 移除feFlood的位置尺寸属性，让滤镜自适应目标元素的大小。

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