如何为SVG中的多个文本标签分别设置独特的背景颜色？
- 内容介绍
- 文章标签
- 相关推荐
本文共计838个文字，预计阅读时间需要4分钟。
原文：
在 SVG 中为文本添加背景色，最可靠的方式是使用 <filter> 配合 feFlood + feMerge 实现“文字叠加于纯色块之上”的视觉效果。但许多开发者会遇到一个典型问题：多个 <text> 元素都应用了看似不同的滤镜，却始终显示第一个滤镜定义的颜色（如全为红色）。根本原因在于：SVG 中 id 属性必须全局唯一——当多个 <filter> 使用相同的 id="solid" 时，浏览器仅识别第一个定义，后续同名滤镜被忽略，导致所有 filter="url(#solid)" 都指向同一个（即第一个）红色滤镜。
✅ 正确做法是为每个滤镜分配唯一 ID，并在对应 <text> 的 filter 属性中精确引用该 ID。
本文共计838个文字，预计阅读时间需要4分钟。
原文：
在 SVG 中为文本添加背景色，最可靠的方式是使用 <filter> 配合 feFlood + feMerge 实现“文字叠加于纯色块之上”的视觉效果。但许多开发者会遇到一个典型问题：多个 <text> 元素都应用了看似不同的滤镜，却始终显示第一个滤镜定义的颜色（如全为红色）。根本原因在于：SVG 中 id 属性必须全局唯一——当多个 <filter> 使用相同的 id="solid" 时，浏览器仅识别第一个定义，后续同名滤镜被忽略，导致所有 filter="url(#solid)" 都指向同一个（即第一个）红色滤镜。
✅ 正确做法是为每个滤镜分配唯一 ID，并在对应 <text> 的 filter 属性中精确引用该 ID。