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

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

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

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

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

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

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

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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

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

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

• 错误写法：（缺 #）
• 错误写法：（跨 svg 引用失败）
• 正确写法：

不复杂但容易忽略

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！