HTML SVG 文本标签的独立背景色实现方法

在 svg 中为多个 `` 元素分别设置不同背景色时，需为每个 `` 定义唯一 `id`，否则浏览器会复用首个同名滤镜，导致所有文本显示同一背景色。

svg 的 元素通过 id 属性被 的 Filter 属性引用（如 filter=”url(#solid1)”）。若多个 使用相同 id（例如都设为 id=”solid”），html/SVG 解析器将仅识别第一个定义，后续同名滤镜会被忽略——这正是原文中所有文字均呈现红色背景的根本原因。

正确做法是：为每个背景色需求创建独立、唯一的滤镜 ID，并确保 元素精准引用对应 ID。以下是优化后的完整示例：

✅ 关键改进说明：

• 每个 拥有唯一 id（solid1 / solid2）；
• filter 引用与定义严格一一对应；
• 扩展了 x, y, width, height 属性（推荐设为 “-10%” 和 “120%”），避免背景裁剪文本边缘；
• 添加 dominant-baseline=”middle” 和 text-anchor=”start” 提升文字对齐可控性。

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 不可将 放入 内部（虽部分浏览器兼容，但不符合 SVG 规范）；更健壮的做法是将所有 统一置于
• 若需动态生成多标签，建议用 javaScript 为每个滤镜生成带时间戳或索引的唯一 ID；
• feFlood + feMerge 是轻量级背景方案，如需圆角、阴影等效果，可叠加 feOffset、feGaussianBlur 或改用 + 组合定位。

通过保障滤镜 ID 的唯一性与引用准确性，即可轻松实现 SVG 中任意数量文本的个性化背景色渲染。