第四章：文档结构

[wangmeijian]

分组和引用对象

第一章（ #1 )讲过，<g>元素可以将其所有子元素作为一个组合，给<g>元素加上id，就可以被<use>复用，并且，可以指定<use>元素的x、y属性将复用的元素整体上下左右移动。

下面的例子中，<use>元素将米老鼠向右移动了120像素

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
  <g id="mouse">
    <!-- 头 -->
    <g fill="red" id="demo">
      <circle cx="50" cy="50" r="30" />
    </g>
    <!-- 左耳 -->
    <use xlink:href="#demo" transform="scale(0.5, 0.5)" />
    <!-- 右耳 -->
    <use xlink:href="#demo" transform="scale(0.5, 0.5) translate(100 0)" />
    <!-- 右胡须 -->
    <g id="whiskers" stroke="black">
      <line x1="60" y1="55" x2="100" y2="50" />
      <line x1="60" y1="55" x2="100" y2="70" />
    </g>
    <!-- 左胡须 -->
    <use xlink:href="#whiskers" transform="scale(-1 1) translate(-100 0)" />
    <!-- 左眼 -->
    <circle cx="40" cy="40" r="5" fill="black" />
    <!-- 右眼 -->
    <circle cx="60" cy="40" r="5" fill="black" />
    <!-- 嘴巴 -->
    <polyline points="45 60, 50 65, 55 60" style="stroke: black; fill: none" />
  </g>
  <use xlink:href="#mouse" x="120" />
</svg>

上面的例子渲染出2只米老鼠，如果想把分组当成模板一样使用，只在使用<use>引用分组的时候才渲染出来，定义的时候不渲染，只需要将分组定义在<defs>内部。

<defs>
  <g id="mouse"><!-- 分组图形 --></g>
</defs>

练习

尝试用SVG做一个美国国旗

自己先试着动手做，再查看在线演示

第五章：【坐标系统变换】