<defs>定义可复用图形元素，<use>引用它们以提升SVG简洁性与可维护性；<defs>内元素不渲染，仅存档，支持<circle>、<g>、<symbol>等；<use>通过href定位并支持样式覆盖与缩放。
<defs> 用来定义可复用的图形元素，<use> 用来引用这些定义好的元素。它们配合使用，能避免重复写代码，让 SVG 更简洁、易维护。
把图形放进 <defs> 里
它本身不显示，只起“存档”作用。 常见放进去的有：
• <circle>、<rect>、<path> 等基础图形
• <g>（组合）——适合打包多个图形一起复用
• <symbol>（推荐用于图标系统，支持 viewBox 和独立缩放）
例如：
<svg><br> <defs><br> <circle id="dot" r="4" fill="#3498db"/><br> <g id="icon-home"><br> <path d="M10 20v-6h4v6h5v-8h-3V7c0-1.7.7-2.3 1.5-3s1.5.7 1.5 2.3v2h-3v6h3v8z"/><br> </g><br> </defs><br></svg>
用 <use> 引用定义好的内容
通过 xlink:href（旧写法）或 href（现代写法）指向 id，再用 x、y 定位位置。
支持 width/height（对 <symbol> 有效），也支持 CSS 样式覆盖（如 fill、stroke）。
例如：
<use href="#dot" x="20" y="30"/><br><use href="#dot" x="60" y="30" fill="red"/><br><use href="#icon-home" x="100" y="20" width="24" height="24"/>
注意几个关键细节
• id 必须唯一，且不能含空格或特殊符号
• <use> 是“实例化”，不是复制——改原定义，所有引用处自动更新
• 若引用的是 <g> 或 <circle>，fill 等属性可在 <use> 上直接设，会覆盖原始值（继承规则类似 CSS）
• 在 <symbol> 中定义时，建议加上 viewBox，这样用 width/height 缩放才准确
一个实用小技巧：用 <symbol> + <use> 做图标库
把图标统一放在 <defs> 里的 <symbol> 中，每个带独立 viewBox，然后在页面各处用 <use> 调用，尺寸颜色随心控制，结构清晰又高效。
