SVG symbol 怎样与use组合复用图形

做一组重复出现的 SVG 图标时，我更愿意把“图形长什么样”和“图形放在哪里”拆开： 保存可复用模板， 负责创建实例。这样同一个图形只维护一份，页面上可以用不同坐标、尺寸和透明度重复使用。

关键点是：symbol 自己不会直接渲染，只有被 use 引用后才会出现。下面用一个圆点图标说明这组元素怎样配合。

官方资料：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/symbol

先把图形模板放进 symbol

symbol 最重要的两个属性是稳定的 id 和内部坐标系 viewBox。id 供 use 定位，viewBox 描述模板内部如何理解坐标。把它放进 defs 还能清楚表达“这里只定义资源，暂时不直接显示”。

这里的圆心和半径都属于 0 0 20 20 这套内部坐标。模板越稳定，后面实例化时越容易统一缩放；不要一开始就把页面的绝对坐标写进 symbol。

用 use 把同一模板变成多个实例

模板定义好后，用 use 通过 href="#status-dot" 指向它。实例的位置和显示尺寸属于 use，因此同一个圆点可以有不同的 x、y、width 和 height。

这段写法的维护收益很直接：圆形结构只出现一次，实例只表达布局差异。以后要把圆点改成带描边的标记，只改 symbol 内部的图形，三个 use 仍然可以保留。

坐标系和比例要在 symbol 层先说清

viewBox 是模板的内部视口，use 的尺寸则决定这个模板在外层 SVG 中占多大空间。两者配合时，默认会按比例适配；如果外层容器和内部比例不同，可以显式设置 preserveAspectRatio，例如 xMidYMid meet 表示居中并完整放入，不为了填满而拉伸。

refX 和 refY 适合处理模板的参考点。当团队把图标的视觉锚点约定为中心、底部或某个基线时，可以在 symbol 上统一这个约定；不要为了修一个实例的对齐问题，就复制一份新的路径。

工程上可以把内部坐标统一成 16、20 或 24 的网格，并在团队文档中固定下来。统一网格比在每个 use 上临时调整偏移更容易排查。

模板和实例各自负责什么

如果需要给图标补充可访问名称，应结合具体实例的语义放置标题或辅助文本，不要因为复用方便就让所有实例共享一段不准确的说明。复用解决的是结构重复，不会自动替你完成语义设计。

常见追问

为什么直接写 symbol 看不到图形？ 因为它是模板元素，只有被 use 实例化后才参与渲染。

可以把 use 写到 defs 里吗？ 可以组织资源，但真正需要显示的实例仍应处在可见的 SVG 结构中；先确认你的外层布局和引用关系都清楚。

href 和旧式 xlink:href 怎么选？ 新代码优先使用 href，并按项目需要考虑目标浏览器的兼容策略；不要因为复制旧片段而同时维护两套引用写法。