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