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>