svg 中的疑惑点
svg，g ，defs，symbol 都是容器元素,使用起来给人许多疑惑
svg-spirite-loader在页面生成的svg标签有什么特点？
svg标签里面的symbol有什么用？
这些标签能够随意相互包裹么?
不能任意嵌套
经过实验发现：
- svg>g>svg>g可以任意嵌套
- defs symbol嵌套不会展示，因为这两个容器本来就不会展示
可以用上面的例子测试
必须包裹在svg内部
g,defs,symbol use 外面必须包裹svg元素，否则这些元素是不起作用的；
// g元素外层没有svg元素
单独一个g元素不会渲染；也不能被use元素复用
// g元素外层有svg元素
上面的html能渲染出来两组图像。
g元素
g是用来组合读写的容器，看名字像是group的缩写，添加到g元素上的变换会应用到其所有的子元素上。
添加到g元素的属性会被其所有的子元素继承；比如fill会被子元素继承。
此外，g元素也可以用来定义复杂的对象，之后可以通过use元素来引用它们。
use复用
use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置。
克隆之后样式可能会复制过去：
克隆导致上面渲染出来两个长方形颜色一致。
use出来的svg的颜色没有变成红色说明css选择器在此处不再起作用了。
此时如何去更改颜色呢，看调整svg颜色
defs
def -->define 定义以后需要重复使用的图形元素。
建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。
在defs元素中定义的图形元素不会直接呈现。
你可以在你的视口的任意地方利用 元素呈现这些元素。
使用defs之后只能看到一个长方块。
symbol元素
symbol元素用来定义一个图形模板对象，它可以用一个 元素实例化。
symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义，和g，defs类似。
symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 元素）能呈现，类似于defs。
symbol 和svg 一样也可以使用viewBox。
vue中使用svg-sprite-loader之后就会在页面的body下面渲染一个下面结构的html代码
调整svg大小
对上面的svg设置width="100" height="5" 或者 style="width:100px;height:5px"之后，图像直接消失了。
消失的原因在于图像的位置在偏离左上角10px,10px的位置，设置svg的展示区域是从0,0偏离到width，height；而此处height只有5px，导致不能看到图像。
所以一般需要viewBox这个属性，值为：x y width height，功能类似于截取svg图像；如果图像的尺寸/偏移和viewBox一致，放大缩小的操作作用域整个图像；如果viewBox和图像原始尺寸/偏移不一致,会导致只能展示一部分的图像。
调整svg颜色
一般的svg有背景和图案组成，背景色透明，由页面背景决定；图案的颜色根据svg元素的继承特点使用fill设定。
方法一：
svg{
fill:red;
} // 需要特意设置fill
方法二：
svg{
fill:currentColor;
color:red;
} // 只需要设置color
特殊情况：
如果预先在内部设定了背景色或者图案色，
比如上面的svg内部定义了一个style，直接设定了样式。外部使用style又设置了样式。非use使用(.special )可以改变内部path的fill；使用use情况(.sdsdsd)无法改变内部path的fill，css选择器在此处失效了，无法覆盖旧有样式。
如果必须要控制样式怎么办呢？
这时候可以使用css变量来定义内部的样式，通过改变css变量的值来修改颜色。
成功改变了颜色，但是此处又让人疑惑：使用css变量之后 css选择器好像又生效了......
借(盗)鉴(取)别人的svg
只要把svg内部元素复制到*.svg文件中，外面加一个下面的wrapper就可以了: