在 svg 中为不同 `
SVG 滤镜（如 <filter>）通过 id 被引用，而 HTML/SVG 中 id 属性具有全局唯一性约束。当多个 <filter> 使用相同的 id（例如都叫 "solid"），浏览器仅识别第一个定义，后续同名滤镜会被忽略——这正是原文中所有文本均显示为红色（首个 flood-color="red"）的根本原因。
要实现每个文本拥有独立背景色，关键在于：为每个滤镜分配唯一 id，并在对应 <text> 的 filter 属性中精确引用该 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">
<!-- 底图 -->
<image width="1024" height="1024"
xlink:href="https://www.serebii.net/pokearth/paldea.jpg" />
<!-- 标签 1：红色背景 -->
<a xlink:href="#test1">
<filter id="bg-red" x="-10" y="-10" width="120%" height="120%">
<feFlood flood-color="red" result="bg-fill" />
<feMerge>
<feMergeNode in="bg-fill" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text filter="url(#bg-red)" x="110" y="180" font-size="50"
dominant-baseline="middle" text-anchor="start">Test 1</text>
</a>
<!-- 标签 2：黄色背景 -->
<a xlink:href="#test2">
<filter id="bg-yellow" x="-10" y="-10" width="120%" height="120%">
<feFlood flood-color="yellow" result="bg-fill" />
<feMerge>
<feMergeNode in="bg-fill" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text filter="url(#bg-yellow)" x="20" y="50" font-size="50"
dominant-baseline="middle" text-anchor="start">Test 2</text>
</a>
</svg>✅ 关键改进说明：
- 每个 <filter> 使用语义化唯一 id（如 bg-red、bg-yellow）；
- x、y、width、height 属性适当扩大滤镜作用区域（如 x="-10" + width="120%"），避免背景被裁剪；
- <text> 中 dominant-baseline="middle" 和 text-anchor="start" 提升文字对齐可控性；
- <feFlood> 的 result 名称可复用（如均为 "bg-fill"），因其作用域限于当前滤镜内部，不冲突。
⚠️ 注意事项：
- 不要将 <filter> 写在 <text> 内部（虽部分浏览器兼容，但不符合规范）；推荐统一置于 <svg> 根下或 <defs> 中；
- 若需复用滤镜逻辑，建议将所有 <filter> 提前定义在 <defs> 块中，提升结构清晰度与可维护性；
- 避免在 <a> 标签内嵌套 <filter> —— <filter> 是 SVG 资源元素，应作为独立声明存在（理想写法见下方优化版）。
? 进阶建议（推荐结构）：
<svg ...>
<defs>
<filter id="bg-red" ...>...</filter>
<filter id="bg-yellow" ...>...</filter>
</defs>
<image ... />
<a><text filter="url(#bg-red)" ...></text></a>
<a><text filter="url(#bg-yellow)" ...></text></a>
</svg>此方式符合 SVG 规范，确保资源预加载与跨浏览器稳定性，是生产环境的最佳实践。
