如何为 SVG 中每个文本标签独立设置背景色？
- 内容介绍
- 文章标签
- 相关推荐
本文共计864个文字，预计阅读时间需要4分钟。
在+%3Ca+style%3D%22color%3A
直接输出结果：
SVG 滤镜（<filter>）通过 id 被 <text> 等元素引用，而 HTML/SVG 规范要求文档内所有 id 值必须唯一。在原始代码中，两个 <filter> 均使用了 id="solid"，导致浏览器仅识别第一个定义（红色），后续 <text filter="url(#solid)"> 全部绑定到该滤镜，因此始终显示红色背景。
✅ 正确做法是：为每个背景色定义独立的、带唯一 ID 的滤镜，并让对应 <text> 显式引用该 ID。
本文共计864个文字，预计阅读时间需要4分钟。
在+%3Ca+style%3D%22color%3A
直接输出结果：
SVG 滤镜（<filter>）通过 id 被 <text> 等元素引用，而 HTML/SVG 规范要求文档内所有 id 值必须唯一。在原始代码中，两个 <filter> 均使用了 id="solid"，导致浏览器仅识别第一个定义（红色），后续 <text filter="url(#solid)"> 全部绑定到该滤镜，因此始终显示红色背景。
✅ 正确做法是：为每个背景色定义独立的、带唯一 ID 的滤镜，并让对应 <text> 显式引用该 ID。