このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
<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%;
}
<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 プロパティとして使用することもできます。
DOM インターフェイス
この要素は SVGForeignObjectElement インターフェイスを実装しています。
使用可能な場所
| カテゴリー | グラフィック要素、描画可能要素 |
|---|---|
| 許可されている内容 | あらゆる要素や文字データ |
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |
ブラウザーの互換性
Enable JavaScript to view this browser compatibility table.