<foreignObject>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<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; アニメーション: 可

メモ: SVG2 以降、x, y, width, height はジオメトリー属性であり、これらの属性は要素の CSS プロパティとして使用することもできます。

使用可能な場所

カテゴリー	グラフィック要素、描画可能要素
許可されている内容	あらゆる要素や文字データ

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # ForeignObjectElement

ブラウザーの互換性

BCD tables only load in the browser