SVG Sprites的使用

https://blog.csdn.net/qq_36648555/article/details/78440805

Defs/Symbols方案

這種其實就是在SVG Sprites上面更進一步的使用了，SVG Sprites是須要咱們去經過座標獲取對應位置圖標的，可是SVG Defs/Symbols就更簡單了，直接經過給每一個SVG ICON定義ID，直接調用對應ID便可：

<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">

    <symbol id="icon1"viewBox="0 0 32 32">

        <path fill="#444444"d="M3 3h1v12h-1v-12z"></path>

    </symbol>

    <symbol id="icon2"viewBox="0 0 32 32">

         <path fill="#444444"d="M3 14h10v1h-10v-1z"></path>

    </symbol>

</svg>

將上面代碼保存爲SVG文件後，在HTML咱們經過下面的方式能夠直接調用：

<svg>

    <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)"xlink:href="/svg/symbol.svg#icon1"></use>

</svg>

<svg>

    <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)"xlink:href="/svg/symbol.svg#icon2"></use>

</svg>