SVG的和标签怎么用 SVG复用元素

定义可复用图形元素,引用它们以提升SVG简洁性与可维护性;内元素不渲染,仅存档,支持、、等;通过href定位并支持样式覆盖与缩放。

标签怎么用 svg复用元素">

用来定义可复用的图形元素, 用来引用这些定义好的元素。它们配合使用,能避免重复写代码,让 SVG 更简洁、易维护。

把图形放进

它本身不显示,只起“存档”作用。 常见放进去的有:
等基础图形
(组合)——适合打包多个图形一起复用
(推荐用于图标系统,支持 viewBox 和独立缩放)

例如:








引用定义好的内容

通过 xlink:href(旧写法)或 href(现代写法)指向 id,再用 xy 定位位置。
支持 width/height(对 有效),也支持 CSS 样式覆盖(如 fill、stroke)。

例如:



注意几个关键细节

id 必须唯一,且不能含空格或特殊符号
是“实例化”,不是复制——改原定义,所有引用处自动更新
• 若引用的是 fill 等属性可在 上直接设,会覆盖原始值(继承规则类似 CSS)
• 在 中定义时,建议加上 viewBox,这样用 width/height 缩放才准确

一个实用小技巧:用 + 做图标库

把图标统一放在 里的 中,每个带独立 viewBox,然后在页面各处用 调用,尺寸颜色随心控制,结构清晰又高效。