</linearGradient>
</defs>
<rectx=”1cm”y=”1cm”width=”6cm”height=”1cm”
fill=”url(#Gradient01)”/>
</svg>
图形相关元素的定义可以用use元素链接到文档。例如:
<svgwidth=”10cm”height=”3cm”viewBox=”0010030″version=”1.1″
xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”>
<desc>ExampleUse01-Simplecaseof’use’ona’rect'</desc>
<defs>
<rectid=”MyRect”width=”60″height=”10″/>
</defs>
<rectx=”.1″y=”.1″width=”99.8″height=”29.8″
fill=”none”stroke=”blue”stroke-width=”.2″/>
<usex=”20″y=”10″xlink:href=”#MyRect”/>
</svg>
在这里请注意xlink名称空间的使用。尽管大多数查看器没有它也将正确显示这一项,但为了保持一致,xlink名称空间应该在<svg></svg>元素上定义。
引用-use元素
任何svg,symbol,g,单个的图形元素和use元素本质上都可以作为模板对象被use元素引用(例如初始化)。use引用的图形内容会在指定的位置渲染。与image元素不同,use元素不能引用整个文档。
use元素也有x,y,width和height属性,这些属性可以省略,如果不省略的话,会将被引用的图形内容坐标或长度映射到当前的用户坐标空间来。
use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中;这棵树的父节点是use元素。虽然是非公开的DOM节点,但是本质上还是DOM节点,所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用,而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝,这些拷贝过来的元素与原来的元素已经无关系了,所以这里不会继承被引用元素祖先节点的属性),如果这些节点本身有相关(CSS)属性,还会覆盖继承来的属性,这些与普通的DOM节点是一致的,所以对use元素使用"visibility:hidden"时要小心,并不一定会起作用。但是由于这部分节点是非公开的,在DOM操作中,也只能看到use元素,所以也只能操作到use元素。
从视觉效果来看,use元素更像是占位符,渲染完成后的视觉效果就和直接用被引用对象渲染是一样的:
1.use元素引用一个symbol元素
这种情况下,视觉效果就相当于:
(1)把use元素换成g元素;
(2)把use的除x,y,width,height,xlink:href外的属性全部移到g元素;
(3)把use的x,y属性变成translate(x,y),追加到g元素的transform属性最后;









