HTML5的SVG绘图笔记4：组合与重用

g元素

g元素是一种把相关元素进行组合的容器元素。在g标记之间定义一组图形元素，这些图形就成为一个整体，既可以使文档结构清晰，又方便用户对组合元素进行操作。

<svg height="600" width="800">
 <g id="house">
  <polyline points="10 110,110 10,210 110" stroke="black" fill="none" stroke-width="2"></polyline>
  <rect x="10" y="110" height="200" width="200" stroke="black" fill="none"></rect>
  <rect x="20" y="180" height="40" width="40" stroke="black" fill="none"></rect>
  <rect x="130" y="230" height="80" width="60" stroke="black" fill="none"></rect>    
 </g>
 <g id="man"> 
  <circle  cx="310" cy="210"  r="25" stroke="black" stroke-width="2" style="fill:none"></circle>
  <polyline points="310 233,310 300,280 330" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="310 300,340 330" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="310 265,283 240" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="310 265,337 240" stroke="black" fill="none" stroke-width="2"></polyline>    
 </g>
 <g id="woman">
  <circle  cx="410" cy="210"  r="25" stroke="black" stroke-width="2" style="fill:none"></circle>
  <polyline points="410 233,410 280" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="410 265,380 240" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="410 265,440 240" stroke="black" fill="none" stroke-width="2"></polyline>
  <polygon points="410 280,380 310,440 310" stroke="black" fill="none" stroke-width="2"></polygon>
  <polyline points="400 310,390 344" stroke="black" fill="none" stroke-width="2"></polyline>
  <polyline points="420 310,430 350" stroke="black" fill="none" stroke-width="2"></polyline>
 </g>
</svg>

use元素

SVG使用use元素，为定义在g元素内的组合或者任意独立图形元素提供类似复制粘贴的功能。

<use xlink:href="URI" x="xvalue" y="yvalue"/>

<use xlink:href="#house" x="700" y="120"></use>
 <use xlink:href="#man" x="350" y="180"></use>
 <use xlink:href="#woman" x="150" y="180"></use>

defs元素

通过在起始和结束defs标记之间放置这些组合对象，定义将来使用的内容，这时只定义但并不显示它们。需要的时候，使用use元素将defs元素定义的内容链接到需要的地方。通过这两个元素，可以多次重用同一内容，消除冗余。

 <defs>
 	<g></g>
 </defs>