在 svg 中为多个 `
SVG 滤镜（
✅ 正确做法是：为每个滤镜分配语义清晰、全局唯一的 id（如 solid1、solid2），并确保
以下是修正后的完整可运行示例：
SVG Multi-Color Text Backgrounds
? 关键优化说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ id 唯一性：solid1 / solid2 确保滤镜独立生效；
- ✅ 滤镜尺寸扩展：将 x, y, width, height 调整为 "-10%" / "120%"，避免背景裁剪文字（原 x="0" y="0" width="1" height="1" 仅覆盖单位区域，易导致背景不完整）；
- ✅ 可读性增强：为
添加 fill 颜色（如红底配白字、黄底配黑字），提升对比度与可访问性； - ✅ 语义化结构： 标签保留可点击能力（配合 xlink:href），便于后续添加交互逻辑。
? 进阶提示： 若需动态生成大量带背景文本，建议用 JavaScript 批量创建唯一滤镜 ID，或改用 总之，SVG 滤镜的 id 是核心标识符——唯一即自由，重名即失效。牢记此原则，即可轻松实现任意数量、任意颜色组合的带背景文本标签。 方案（适合复杂样式），但纯 SVG 滤镜方案更轻量、兼容性更佳（支持 IE9+ 及所有现代浏览器）。
