在 svg 中为多个 `
SVG 的 <filter> 元素通过 id 属性被 <text> 的 filter 属性引用（如 filter="url(#solid1)"）。若多个 <filter> 使用相同 id（例如都设为 id="solid"），HTML/SVG 解析器将仅识别第一个定义，后续同名滤镜会被忽略——这正是原文中所有文字均呈现红色背景的根本原因。
正确做法是：为每个背景色需求创建独立、唯一的滤镜 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">
<!-- 背景图像 -->
<image width="1024" height="1024"
xlink:href="https://www.serebii.net/pokearth/paldea.jpg" />
<!-- 标签 1：红色背景 -->
<a xlink:href="#test1">
<filter id="solid1" x="-10%" y="-10%" width="120%" height="120%">
<feFlood flood-color="red" result="bg1" />
<feMerge>
<feMergeNode in="bg1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text filter="url(#solid1)" x="110" y="180" font-size="50"
dominant-baseline="middle" text-anchor="start">Test 1</text>
</a>
<!-- 标签 2：黄色背景 -->
<a xlink:href="#test2">
<filter id="solid2" x="-10%" y="-10%" width="120%" height="120%">
<feFlood flood-color="yellow" result="bg2" />
<feMerge>
<feMergeNode in="bg2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<text filter="url(#solid2)" x="20" y="50" font-size="50"
dominant-baseline="middle" text-anchor="start">Test 2</text>
</a>
</svg>✅ 关键改进说明：
- 每个 <filter> 拥有唯一 id（solid1 / solid2）；
- filter 引用与定义严格一一对应；
- 扩展了 x, y, width, height 属性（推荐设为 "-10%" 和 "120%"），避免背景裁剪文本边缘；
- 添加 dominant-baseline="middle" 和 text-anchor="start" 提升文字对齐可控性。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不可将 <filter> 放入 <a> 内部（虽部分浏览器兼容，但不符合 SVG 规范）；更健壮的做法是将所有 <filter> 统一置于 <svg> 根节点下（如 <defs> 中），再全局引用；
- 若需动态生成多标签，建议用 JavaScript 为每个滤镜生成带时间戳或索引的唯一 ID；
- feFlood + feMerge 是轻量级背景方案，如需圆角、阴影等效果，可叠加 feOffset、feGaussianBlur 或改用 <rect> + <text> 组合定位。
通过保障滤镜 ID 的唯一性与引用准确性，即可轻松实现 SVG 中任意数量文本的个性化背景色渲染。
