Posted at

IE/Edge で svg に innerHTML がきかない件

More than 1 year has passed since last update.


困ったこと

svg 要素に書き込もうとすると IE/Edge ブラウザでは DOM がレンダリングされない。

<svg>

<g v-html="data"></g>
<svg>

モダンブラウザだとちゃんとレンダリングされるが...

<svg>

<g>
<path ..../>
</g>
<svg>

IE/Edge だと...

<svg>

<g></g>
<svg>


解決策

svg 要素対応の polyfill のライブラリ、 innersvg-polyfill をつかう。

https://www.npmjs.com/package/innersvg-polyfill

サポートバジージョンは以下。


  • Chrome6+

  • Safari5+

  • Firedox4+

  • IE9+

CDN も配布されていたのでこちらを読み込むだけでも OK。

<script src="//cdn.jsdelivr.net/npm/innersvg-polyfill@0.0.2/innersvg.min.js" type="text/javascript"></script>