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

2026-02-02 00:00:00 作者：霞舞

在 svg 中为不同 `` 元素添加不同背景色时，若复用相同 `id` 的 ``，会导致所有文本均应用首个定义的滤镜颜色；解决方法是为每个滤镜分配唯一 `id`，并确保 `filter` 属性正确引用对应 id。

SVG 滤镜（）通过 id 被等元素引用，而 HTML/SVG 规范要求文档内所有 id 值必须唯一。在原始代码中，两个均使用了 id

="solid"，导致浏览器仅识别第一个定义（红色），后续全部绑定到该滤镜，因此始终显示红色背景。

✅ 正确做法是：为每个背景色定义独立的、带唯一 ID 的滤镜，并让对应显式引用该 ID。

以下是修正后的完整示例（已优化结构与可维护性）：

? 关键改进说明：

? 进阶提示：
如需大量标签，可将滤镜统一声明在中，复用更高效：


  ...
  ...


...

总结：SVG 滤镜的 id 是作用域内的唯一标识符，重复 ID 不仅导致样式错乱，还违反 Web 标准。坚持「一滤镜一 ID，一文本一引用」原则，即可精准控制每个文本的背景色。

联络方式：

邮箱：8955556@qq.com

Q Q：8955556

微信二维码

我们猜你喜欢