如何为 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。

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="100%" height="auto"> <!-- 底图 --> <image width="1024" height="1024" xlink:href="https://www.serebii.net/pokearth/paldea.jpg" /> <!-- 标签 1：红色背景 --> <g> <filter id="bg-red" x="-20%" y="-20%" width="140%" height="140%"> <feFlood flood-color="#e53e3e" result="bg" /> <feMerge> <feMergeNode in="bg" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <a xlink:href="#test1"> <text filter="url(#bg-red)" x="110" y="180" font-size="50" font-family="sans-serif" fill="#fff" dominant-baseline="middle"> Test 1 </text> </a> </g> <!-- 标签 2：黄色背景 --> <g> <filter id="bg-yellow" x="-20%" y="-20%" width="140%" height="140%"> <feFlood flood-color="#ecc94b" result="bg" /> <feMerge> <feMergeNode in="bg" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <a xlink:href="#test2"> <text filter="url(#bg-yellow)" x="20" y="50" font-size="50" font-family="sans-serif" fill="#000" dominant-baseline="middle"> Test 2 </text> </a> </g> </svg>

? 关键改进说明：

• ✅ 每个 <filter> 使用唯一 id（如 bg-red、bg-yellow）；
• ✅ x/y/width/height 扩展滤镜作用范围（推荐设为 -20% ~ 140%），避免背景被裁剪；
• ✅ 将 <text> 包裹在 <g> 中提升语义与样式管理能力；
• ✅ 添加 font-family、fill 和 dominant-baseline 提升可读性与对齐效果；
• ❌ 避免在 <a> 内重复定义滤镜——滤镜应位于 <svg> 根层级或同级 <defs> 中（本例为清晰展示放于 <g> 外，实际生产建议统一置于 <defs>）。

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

<defs> <filter id="bg-blue" ...>...</filter> <filter id="bg-green" ...>...</filter> </defs> <!-- 后续 text 直接引用即可 --> <text filter="url(#bg-blue)">...</text>

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