SVG入门-标签2

不可视标签

---

不可视标签是svg标签中比较核心的部分，扩展了svg的功能。这部分标签不能之前显示在svg视图上，但可以用于定义纹理，和管理标签。

<use>
<use> 标签用于复制一个形状.
<use>标签是会显示的，显示的形状为href引用中定义的节点的内容，use本身不定义形状的路径。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>
  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>

<use>的href属性指定所要复制的节点，x属性和y属性是 左上角的坐标。另外，还可以指定width和height坐标。

<g>
<g>标签用于将多个形状组成一个组（group），方便复用。比如统一设置背景颜色。
准确的说 标签是会显示的，不过显示的内容是标签里面子标签的内容.。

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圆形</text