HTML5中SVG定义块Defs及重用标签Use的逻辑

SVG 的 <defs> 和 <use> 实现图形复用，<defs> 定义不渲染的模板（如图形、渐变），<use> 通过 href="#id" 引用并实例化独立副本，支持定位与样式定制，ID 必须唯一且 # 不可省略。

SVG 的 <defs> 和 <use> 是实现图形复用的核心机制，本质是“先定义、后引用”，不渲染 <defs> 内容，只把它当作模板库。

defs：只定义、不显示的图形仓库

<defs> 是 SVG 中的声明容器，里面的内容不会直接出现在画布上。它用来预存可复用的图形元素，比如 <circle>、<path>、<g>，甚至渐变（<linearGradient>）或滤镜（<filter>）。浏览器解析时跳过渲染，只记下定义，供后续调用。

• 必须放在 <svg> 标签内，位置通常在开头或结尾，不影响逻辑
• 内部元素可以带 id，这是 <use> 引用的唯一依据
• 支持嵌套，比如 <defs> 里再放一个 <defs>，但无实际必要

use：按需实例化，生成独立副本

<use> 通过 xlink:href（HTML5 中推荐简写为 href）指向 <defs> 中某个带 id 的元素，从而在指定位置“画出”一份副本。这个副本是独立的——修改 <use> 的属性（如 fill、transform）不会影响原定义，也不会影响其他 <use> 实例。

• 支持 x、y 属性控制插入位置（相对于原图左上角）
• 可叠加 transform 实现旋转、缩放等效果
• 若被引用的元素本身有坐标（如 <circle cx="10" cy="10">），<use> 的 x/y 会与之相加，形成最终位置

关键细节：ID 必须唯一，href 必须带 # 号

引用时 href 值必须是形如 "#myCircle" 的片段标识符，开头的 # 不可省略。ID 在整个文档中需唯一，否则行为不可预测。另外，<use> 不能跨 <svg> 引用（除非用外部文件 + href="file.svg#id"，但受同源策略限制）。

立即学习“前端免费学习笔记（深入）”；

• 错误写法：<use href="myCircle">（缺 #）
• 错误写法：<use href="#other-svg-id">（跨 svg 引用失败）
• 正确写法：<use href="#icon-home" x="20" y="30">

不复杂但容易忽略

defs 和 use 的组合让 SVG 具备类似“符号库”的能力，既减少重复代码，又便于统一维护。改一个定义，所有 use 实例自动更新样式基础；每个 use 又能个性化着色或定位。只要记住“定义不画、引用才画，ID 要对、# 不能少”，就掌握了核心逻辑。