<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 です。
例
<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