SVG 元素介绍

SVG 元素定义了可重复使用的图形元素。通过在文档中嵌套 元素，可以定义多个符号，这些符号可以通过使用 元素在其他地方重复使用。

基本语法

<svg>
  <symbol id="myCircle" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
  </symbol>
</svg>

• 元素定义一个可重复使用的图形元素，id 属性指定了该元素的唯一标识符。
• viewBox 属性定义了该元素的视口，即元素内部坐标系的范围，可以通过该属性来缩放和平移元素内部的图形。
• 元素定义了一个圆形，cx、cy、r 属性分别表示圆心坐标和半径，stroke 和 stroke-width 属性分别表示笔画颜色和宽度，fill 属性表示填充颜色。

使用方法

<svg>
  <use xlink:href="#myCircle" x="50" y="50" />
</svg>

• 元素引用了先前定义的 元素，通过 xlink:href 属性指定其 id。
• x、y 属性指定了 元素的位置。

优点

使用 元素可以使 SVG 文件更加清晰、简洁。可以将一些经常使用的图形元素定义为符号，不用在每个需要使用的地方重复绘制相同的图形。此外，使用 元素还可以使 SVG 文件的大小更小。

注意事项

• 元素必须在
• 元素必须在
• 引用符号时必须使用 xlink:href 属性，而非 href 属性。
• 在 IE11 及以下版本的浏览器中，不支持 xlink:href 属性，需要使用 href 属性替代，同时在

参考链接

• MDN Web 文档 -
• MDN Web 文档 -