如何为 SVG 中的多个文本标签设置独立背景色

在 svg 中为不同 `` 元素添加各自专属的纯色背景时，必须为每个 `` 定义唯一 `id`；重复使用相同 `id` 会导致所有文本共用首个滤镜效果，无法实现颜色分离。

svg 滤镜（如 ）通过 id 被引用，而 html/SVG 中 id 属性具有全局唯一性约束。当多个 使用相同的 id（例如都叫 “solid”），浏览器仅识别第一个定义，后续同名滤镜会被忽略——这正是原文中所有文本均显示为红色（首个 flood-color=”red“）的根本原因。

要实现每个文本拥有独立背景色，关键在于：为每个滤镜分配唯一 id，并在对应 的 Filter 属性中精确引用该 id。以下为优化后的完整示例：

✅ 关键改进说明：

• 每个 使用语义化唯一 id（如 bg-red、bg-yellow）；
• x、y、width、height 属性适当扩大滤镜作用区域（如 x=”-10″ + width=”120%”），避免背景被裁剪；
• 中 dominant-baseline=”middle” 和 text-anchor=”start” 提升文字对齐可控性；
• 的 result 名称可复用（如均为 “bg-fill”），因其作用域限于当前滤镜内部，不冲突。

⚠️ 注意事项：

• 不要将 写在 内部（虽部分浏览器兼容，但不符合规范）；推荐统一置于
• 若需复用滤镜逻辑，建议将所有 提前定义在 块中，提升结构清晰度与可维护性；
• 避免在 标签内嵌套 —— 是 SVG 资源元素，应作为独立声明存在（理想写法见下方优化版）。

? 进阶建议（推荐结构）：

此方式符合 SVG 规范，确保资源预加载与跨浏览器稳定性，是生产环境的最佳实践。