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

本文详解如何在 svg 中为不同 `` 元素应用互不干扰的纯色背景，核心在于确保每个 `` 的 `id` 唯一且正确引用，避免因 id 重复导致所有文本共用首个滤镜颜色。

在 svg 中为文本添加背景色，最可靠的方式是使用 配合 feFlood + feMerge 实现“文字叠加于纯色块之上”的视觉效果。但许多开发者会遇到一个典型问题：多个 元素都应用了看似不同的滤镜，却始终显示第一个滤镜定义的颜色（如全为红色）。根本原因在于：SVG 中 id 属性必须全局唯一——当多个 使用相同的 id=”solid” 时，浏览器仅识别第一个定义，后续同名滤镜被忽略，导致所有 Filter=”url(#solid)” 都指向同一个（即第一个）红色滤镜。

✅ 正确做法是为每个滤镜分配唯一 ID，并在对应 的 filter 属性中精确引用该 ID。

以下为修复后的完整示例代码：

? 关键要点说明：

• ✅ 每个 必须有唯一 id（如 solid1、solid2），不可复用；
• ✅ 对应 的 filter 属性需严格匹配 url(#your-unique-id)；
• ✅ feFlood 的 flood-color 可设任意合法 css 颜色值（支持 #rrggbb、rgb()、命名色等）；
• ✅ 建议为文字显式设置 fill（如 fill=”white” 或 fill=”black”），确保文字在深/浅背景上均清晰可读；
• ⚠️ 注意： 定义位置不影响效果，但必须位于同一 SVG 文档内（外部引用需通过 或外部 SVG 文件嵌入，不推荐初学者使用）。

? 进阶提示：若需批量生成多色标签（如动态渲染），建议用 javaScript 生成带唯一 ID 的滤镜，并绑定至对应文本元素，避免硬编码冗余。

通过遵循唯一 ID 原则，即可轻松实现 SVG 中任意数量文本标签的个性化背景色控制——简洁、语义清晰，且完全兼容现代浏览器。