在 svg 中为多个 `
SVG 滤镜（<filter>）通过 id 属性被 <text> 的 filter 属性引用，其作用机制基于文档内 ID 唯一性原则：当多个 <filter> 使用相同 id（如都设为 "solid"），浏览器仅识别第一个定义，后续同名滤镜被忽略。因此，尽管你为不同 <text> 指定了不同 flood-color 和 result，但因 id="solid" 冲突，所有 filter="url(#solid)" 实际都指向第一个红色滤镜。
✅ 正确做法是：为每个滤镜分配语义清晰、全局唯一的 id（如 solid1、solid2），并确保 <text> 的 filter 属性准确引用对应 ID。
以下是修正后的完整可运行示例：
<!DOCTYPE html>
<html>
<head><title>SVG Multi-Color Text Backgrounds</title></head>
<body>
<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：红色背景 -->
<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"
fill="white" font-family="sans-serif" font-weight="bold">
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"
fill="black" font-family="sans-serif" font-weight="bold">
Test 2
</text>
</a>
</svg>
</body>
</html>? 关键优化说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ id 唯一性：solid1 / solid2 确保滤镜独立生效；
- ✅ 滤镜尺寸扩展：将 x, y, width, height 调整为 "-10%" / "120%"，避免背景裁剪文字（原 x="0" y="0" width="1" height="1" 仅覆盖单位区域，易导致背景不完整）；
- ✅ 可读性增强：为 <text> 添加 fill 颜色（如红底配白字、黄底配黑字），提升对比度与可访问性；
- ✅ 语义化结构：<a> 标签保留可点击能力（配合 xlink:href），便于后续添加交互逻辑。
? 进阶提示： 若需动态生成大量带背景文本，建议用 JavaScript 批量创建唯一滤镜 ID，或改用 <foreignObject> + HTML <div> 方案（适合复杂样式），但纯 SVG 滤镜方案更轻量、兼容性更佳（支持 IE9+ 及所有现代浏览器）。
总之，SVG 滤镜的 id 是核心标识符——唯一即自由，重名即失效。牢记此原则，即可轻松实现任意数量、任意颜色组合的带背景文本标签。
