**svg，[g](#g) ，defs，symbol 都是容器元素,使用起來給人許多疑惑** svg-spirite-loader在頁面生成的svg標籤有什麼特點？ svg標籤裡面的symbol有什麼用？ 這些標籤能夠隨意相互包裹麼? #### 不能任意巢狀 經過實驗發現： 1. svg>g>svg>g可以任意巢狀 2. defs symbol巢狀不會展示，因為這兩個容器本來就不會展示 ```html ``` 可以用上面的例子測試 #### 必須包裹在svg內部 g,defs,symbol use 外面必須包裹svg元素，否則這些元素是不起作用的； ```html // g元素外層沒有svg元素

``` 單獨一個g元素不會渲染；也不能被use元素[複用](#use) ```html // g元素外層有svg元素 ``` 上面的html能渲染出來兩組影象。 #### g元素 g是用來組合讀寫的容器，看名字像是group的縮寫，新增到g元素上的變換會應用到其所有的子元素上。 新增到g元素的屬性會被其所有的子元素繼承；比如fill會被子元素繼承。 此外，g元素也可以用來定義複雜的物件，之後可以通過use元素來引用它們。 ```html ``` #### use複用 use元素在SVG文件內取得目標節點，並在別的地方複製它們。它的效果等同於這些節點被深克隆到一個不可見的DOM中，然後將其貼上到use元素的位置。 克隆之後樣式可能會複製過去： ```html ``` 克隆導致上面渲染出來兩個長方形顏色一致。 use出來的svg的顏色沒有變成紅色說明css選擇器在此處不再起作用了。 此時如何去更改顏色呢，看[調整svg顏色](#changecolor) #### **defs** def -->define 定義以後需要重複使用的圖形元素。 建議把所有需要再次使用的引用元素定義在defs元素裡面。這樣做可以增加SVG內容的易讀性和可訪問性。 在defs元素中定義的圖形元素不會直接呈現。 你可以在你的視口的任意地方利用 元素呈現這些元素。 ```html ``` 使用defs之後只能看到一個長方塊。 #### symbol元素 symbol元素用來定義一個圖形模板物件，它可以用一個元素例項化。 symbol元素對圖形的作用是在同一文件中多次使用，新增結構和語義，和g，defs類似。 symbol元素本身是不呈現的。只有symbol元素的例項（亦即，一個引用了symbol的 元素）能呈現，類似於defs。 symbol 和svg 一樣也可以使用viewBox。 vue中使用svg-sprite-loader之後就會在頁面的body下面渲染一個下面結構的html程式碼 ```html ``` #### 調整svg大小 ```html ``` 對上面的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和影象原始尺寸/偏移不一致,會導致只能展示一部分的影象。 ```