0

0

如何为 SVG 中的多个文本标签分别设置独立背景色

霞舞

霞舞

发布时间:2026-02-02 10:24:23

|

419人浏览过

|

来源于php中文网

原创

如何为 SVG 中的多个文本标签分别设置独立背景色

svg 中为不同 `` 元素添加不同背景色时,若复用相同 `id` 的 ``,会导致所有文本均应用首个定义的滤镜颜色;解决方法是为每个滤镜分配唯一 `id`,并确保 `filter` 属性正确引用对应 id。

SVG 滤镜()通过 id 被 等元素引用,而 HTML/SVG 规范要求文档内所有 id 值必须唯一。在原始代码中,两个 均使用了 id="solid",导致浏览器仅识别第一个定义(红色),后续 全部绑定到该滤镜,因此始终显示红色背景。

✅ 正确做法是:为每个背景色定义独立的、带唯一 ID 的滤镜,并让对应 显式引用该 ID。

以下是修正后的完整示例(已优化结构与可维护性):

吐司AI
吐司AI

超多功能的免费在线生图网站!拥有全网更齐全的模型库,0门槛使用!

下载

  
  

  
  
    
      
      
        
        
      
    
    
      
        Test 1
      
    
  

  
  
    
      
      
        
        
      
    
    
      
        Test 2
      
    
  

? 关键改进说明:

? 进阶提示:
如需大量标签,可将滤镜统一声明在 中,复用更高效:


  ...
  ...


...

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

184

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

289

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

259

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

126

2025.08.07

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

0

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

52

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

25

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

10

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.2万人学习

CSS教程
CSS教程

共754课时 | 26.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号