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

困ったこと

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 をつかう。

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

• Chrome6+
• Safari5+
• Firedox4+
• IE9+

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

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