2019年7月9日 星期二

使用 symbol 來製作 svg sprite

以往要製作小圖示會使用到 css sprite 的技巧,後來因為 rwd 及需要在視網膜解析度也能漂亮呈現 icon,就有用 icon font 取代 css sprite 的技術,但由於 icon font 一次需載入整包字型檔加上文字可能會有鋸齒,於是就又有些人會使用 svg sprite 的方式來製作,製作的方法是利用 svg symbol 的特性,先定義一些圖示後再把這些圖示用到想呈現的地方即可。


首先我們會用 svg 的 symbol 來定義一些圖樣,像這樣:


...



要使用的時候再用 use 去指定 id 就可以了




使用 js 去改變 xlink:href 的內容就可以切換 icon

See the Pen
svg sprite
by deathhell (@deathhell)
on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...