前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点-SVG元素的重用。
组合-g元素
g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用,提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子:
<svgxmlns=”http://www.w3.org/2000/svg”
version=”1.1″width=”5cm”height=”5cm”>
<desc>Twogroups,eachoftworectangles</desc>
<gid=”group1″fill=”red”>
<rectx=”1cm”y=”1cm”width=”1cm”height=”1cm”/>
<rectx=”3cm”y=”1cm”width=”1cm”height=”1cm”/>
</g>
<gid=”group2″fill=”blue”>
<rectx=”1cm”y=”3cm”width=”1cm”height=”1cm”/>
<rectx=”3cm”y=”3cm”width=”1cm”height=”1cm”/>
</g>
<!–Showoutlineofcanvasusing’rect’element–>
<rectx=”.01cm”y=”.01cm”width=”4.98cm”height=”4.98cm”
fill=”none”stroke=”blue”stroke-width=”.02cm”/>
</svg>
注意几点:
1.xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档,XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间,给命名空间提供别名等。
2.g元素是可以嵌套的。
3.组合起来的图形元素就和单个的元素一样,可以给id值,这样,需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。
4.组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等),这也是使用组合的一种场景。
模板-symbol元素
symbol元素用于定义图形模板(模板可以包含很多图形),这个模板可以被use元素实例化。模板的功能与g元素很相似,都是提供一组图形对象,但是也有一些区别。与g元素不同的地方是:
1.symbol元素本身是不会被渲染的,只有symbol模板的实例会被渲染。
2.symbol元素可以拥有属性viewBox和preserveAspectRatio,这些允许symbol缩放图形元素。
从渲染角度来说,与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素;这些元素不会直接被渲染;他们的使用方式基本都是由use元素去实例化。正是这个原因,对于symbol来说,’display’属性是没有意义的。









