svg要素でもinnerHTMLを使えるようにするpolyfill

主にIE対応に必要。

<svg>
    <g id="base">
        <rect x="10" y="10" width="100" height="100" fill="blue"></rect>
        <circle cx="300" cy="100" r="20" fill="red"></circle>
    </g>
    
    <g id="overlay"></g>    
</svg>

<svg>

</g>

</svg>

例えば、上記のコードで #base 以下の要素をまるごと #overlay にコピーしたい場合に innerHTML を使うとらくです。

document.querySelector('#overlay').innerHTML = document.querySelector('#base').innerHTML

1	document.querySelector('#overlay').innerHTML = document.querySelector('#base').innerHTML

しかし残念なことに、IE では ver.11 であっても上記コードは動きません。
なぜなら、IE では svg エレメントに innerHTML メソッドが実装されていないためです。

jQuery や d3.js の html メソッドも上記理由から svg 要素に対しては使用することができません。

残念すぎる…

しかし、innersvg-polyfill というポリフィルを使うと IE でも svg 要素の innerHTML が利用できるようになります！
以外と落とし穴になりやすいので D3.js を使うときには一緒に読み込んでおくといいかもしれません。

innersvg-polyfill

svg要素でもinnerHTMLを使えるようにするpolyfill

投稿者: shimizu

“svg要素でもinnerHTMLを使えるようにするpolyfill” への1件の返信