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>
发布了137 篇原创文章 · 获赞 26 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_40119412/article/details/104146095