IEではSVGのforeignObjectタグが使えない

SVGのforeignObjectタグを使っていたらChromeでは表示されるのにIEでは表示されないといったことがあったのでその時のメモです。

また、IEか...と思ったらChrome以外は表示されないようなので、Edge、Firefox、Safariなどのブラウザに対応したサイトを作成する場合は使わない様に注意しましょう。

＞ foreignObjectにheight値を設定すればIE以外は表示されます。また、Edgeでは「height="auto"」を設定すれば表示されますが、FirefoxやSafariではautoを0として扱うのか表示されませんでした。

以下は動作確認用のコードになります。

<svg width="300" height="260" viewBox="0 0 300 260" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" x2="290" y1="10" y2="10"  stroke="gray" stroke-width="5"/>
    <circle cx="50" cy="80" r="50" fill="orange"/>
    <polyline points="120 30 180 80 120 130" stroke="black" stroke-width="20" stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>                
    <foreignObject width="300" x="0" y="150" font-size="15">
        <span>文字列（foreignObject「height属性なし」）</span>
    </foreignObject>
    <foreignObject width="300" height="auto" x="0" y="180" font-size="15">
        <span>文字列（foreignObject「height="auto"」）</span>
    </foreignObject>
    <foreignObject width="300" height="30" x="0" y="210" font-size="15">
        <span>文字列（foreignObject「height="30"」）</span>
    </foreignObject>
    <text x="0" y="255" fill="black" font-size="15">文字列（text）</text>
</svg>

「文字列（foreignObject）」がChrome以外のブラウザだと表示されません。

＞ IEのみ表示されません。（<foreignObject> - SVG | MDN）

• svg要素の基本的な使い方まとめ
• SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました