<foreignObject>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<foreignObject> は SVG 要素で、異なる XML 名前空間の要素を含みます。ブラウザーのコンテキストでは、ほとんどの場合 (X)HTML です。

例

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- よくある用途: HTML テキストを SVG へ埋め込む --> <foreignObject x="20" y="20" width="160" height="160"> <!-- HTML 文書に埋め込まれた SVG のコンテキストでは XHTML 名前空間は省略できますが、SVG 文書内の コンテキストでは必須です。 --> <div xmlns="http://www.w3.org/1999/xhtml"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat. </div> </foreignObject> </svg>

専用属性

height: The height of the foreignObject. 値の型: <length>|<percentage> ; 既定値: auto; アニメーション: 可
width: The width of the foreignObject. 値の型: <length>|<percentage> ; 既定値: auto; アニメーション: 可
x: The x coordinate of the foreignObject. 値の型: <length>|<percentage> ; 既定値: 0; アニメーション: 可
y: The y coordinate of the foreignObject. 値の型: <length>|<percentage> ; 既定値: 0; アニメーション: 可