svg 重用与引用
g元素是一种容器，它组合一组相关的图形元素成为一个整体；<br />
这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用<br />
g元素是可以嵌套的。<br />
组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候只用引用这个id值就可以了。<br />
组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等)，这也是使用组合的一种场景。 <br />
模板 - symbol元素:<br />
symbol元素用于定义图形模板(模板可以包含很多图形)<br />
这个模板可以被use元素实例化<br />
模板的功能与g元素很相似，都是提供一组图形对象,区别在于：<br />
1symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染<br />
2symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。<br />
从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，'display'属性是没有意义的。<br />
定义 - defs元素:<br />
SVG允许定义一组对象，然后重用这组对象(注意，不仅仅是图形对象)。最常见的例子如定义渐变色，然后再其他的图形对象中赋给fill属性<br />
渐变色定义的时候是不会渲染的，所以这类型的对象可以放到任何地方<br />
重用对于图形对象中也是经常存在的，而且我们也不希望定义的时候直接渲染，而是想在引用的地方渲染，这个可以用defs元素实现。<br />
通常情况下，推荐的做法是：只要有可能，就把被引用的对象放到defs元素中。<br />
其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不过每个元素的特性可能少许不同：比如g元素是直接渲染的，symbol和defs不会直接渲染，symbol含有viewBox属性，会创建新的视窗。<br />
通常都会给在defs中定义的元素赋予id属性，并在用到的地方直接使用。<br />
渐变类的可以 fill="url(#Gradient01)" 这样用<br />
而图形灰的需要用use 这样用：x="20" y="10" xlink:href="#MyRect" <br />
xlink:命名空间：<br />
它引用的名称空间需要在svg内定义<br />
引用-use:<br />
任何svg, symbol, g, 单个的图形元素和use元素本质上都可以作为模板对象被use元素引用<br />
use引用的图形内容会在指定的位置渲染。与image元素不同，use元素不能引用整个文档。<br />
use元素也有x, y, width和height属性，这些属性可以省略，如果不省略的话，会将被引用的图形内容坐标或长度映射到当前的用户坐标空间来。<br />
use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中；这棵树的父节点是use元素。<br />
虽然是非公开的DOM节点，但是本质上还是DOM节点，所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用<br />
而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝，这些拷贝过来的元素与原来的元素已经无关系了，所以这里不会继承被引用元素祖先节点的属性)<br />
use上可以使用变形属性<br />
这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用<br />
g元素是可以嵌套的。<br />
组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候只用引用这个id值就可以了。<br />
组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等)，这也是使用组合的一种场景。 <br />
模板 - symbol元素:<br />
symbol元素用于定义图形模板(模板可以包含很多图形)<br />
这个模板可以被use元素实例化<br />
模板的功能与g元素很相似，都是提供一组图形对象,区别在于：<br />
1symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染<br />
2symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。<br />
从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，'display'属性是没有意义的。<br />
定义 - defs元素:<br />
SVG允许定义一组对象，然后重用这组对象(注意，不仅仅是图形对象)。最常见的例子如定义渐变色，然后再其他的图形对象中赋给fill属性<br />
渐变色定义的时候是不会渲染的，所以这类型的对象可以放到任何地方<br />
重用对于图形对象中也是经常存在的，而且我们也不希望定义的时候直接渲染，而是想在引用的地方渲染，这个可以用defs元素实现。<br />
通常情况下，推荐的做法是：只要有可能，就把被引用的对象放到defs元素中。<br />
其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不过每个元素的特性可能少许不同：比如g元素是直接渲染的，symbol和defs不会直接渲染，symbol含有viewBox属性，会创建新的视窗。<br />
通常都会给在defs中定义的元素赋予id属性，并在用到的地方直接使用。<br />
渐变类的可以 fill="url(#Gradient01)" 这样用<br />
而图形灰的需要用use 这样用：x="20" y="10" xlink:href="#MyRect" <br />
xlink:命名空间：<br />
它引用的名称空间需要在svg内定义<br />
引用-use:<br />
任何svg, symbol, g, 单个的图形元素和use元素本质上都可以作为模板对象被use元素引用<br />
use引用的图形内容会在指定的位置渲染。与image元素不同，use元素不能引用整个文档。<br />
use元素也有x, y, width和height属性，这些属性可以省略，如果不省略的话，会将被引用的图形内容坐标或长度映射到当前的用户坐标空间来。<br />
use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中；这棵树的父节点是use元素。<br />
虽然是非公开的DOM节点，但是本质上还是DOM节点，所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用<br />
而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝，这些拷贝过来的元素与原来的元素已经无关系了，所以这里不会继承被引用元素祖先节点的属性)<br />
use上可以使用变形属性<br />
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="5cm" height="5cm">
<desc>Two groups, each of two rectangles</desc>
<g id="group1" fill="red">
<rect x="1cm" y="1cm" width="1cm" height="1cm"/>
<rect x="3cm" y="1cm" width="1cm" height="1cm"/>
</g>
<g id="group2" fill="blue">
<rect x="1cm" y="3cm" width="1cm" height="1cm"/>
<rect x="3cm" y="3cm" width="1cm" height="1cm"/>
</g>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>