2017年8月13日 星期日

把 img 的 svg 標籤轉成真的 svg

近年來為了解析度的關係,又流行起把圖示或一些圖案使用 svg 的方式嵌入,只是若要直接用 svg 的標籤嵌入,圖一複雜就很難維護,但如果用 img 的標籤嵌入就方便許多,但這樣就有一個問題是由於是用 img 的標籤,一些 svg 的 css 就沒辦法使用了,本來應該做些取捨,但也有更好的方式,就是把 img 的標籤再用 js 轉成原本的 svg 就好了,網路上也有好用的工具可以使用,比如這個 SVGInjector

把 js 放入專案後,最基本的用法只要如下面這樣使用就可以了。

  1. // Elements to inject   
  2.   var mySVGsToInject = document.querySelectorAll('img.inject-me');   
  3.   
  4. // Do the injection   
  5. SVGInjector(mySVGsToInject);  

一些進階的用法可以參考官方的說明,這樣就可以開心地使用 svg 了。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...