在 svg 中为不同 `
SVG 滤镜（<filter>）通过 id 被 <text> 等元素引用，而 HTML/SVG 规范要求文档内所有 id 值必须唯一。在原始代码中，两个 <filter> 均使用了 id="solid"，导致浏览器仅识别第一个定义（红色），后续 <text filter="url(#solid)"> 全部绑定到该滤镜，因此始终显示红色背景。
✅ 正确做法是：为每个背景色定义独立的、带唯一 ID 的滤镜，并让对应 <text> 显式引用该 ID。
以下是修正后的完整示例（已优化结构与可维护性）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<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，一文本一引用」原则，即可精准控制每个文本的背景色。
