使用語境
| 分類 | 圖形元素，可渲染元素 |
|---|---|
| 允許內容 | 任何元素或字元資料 |
屬性
height-
foreignObject 的高度。值型別：<length> | <percentage>；預設值：
auto；可動畫：是 width-
foreignObject 的寬度。值型別：<length> | <percentage>；預設值：
auto；可動畫：是 x-
foreignObject 的 x 座標。值型別：<length> | <percentage>；預設值：
0；可動畫：是 y-
foreignObject 的 y 座標。值型別：<length> | <percentage>；預設值：
0；可動畫：是
注意：從 SVG2 開始，x、y、width 和 height 是幾何屬性，這意味著這些屬性也可以作為該元素的 CSS 屬性來使用。
DOM 介面
此元素實現了 SVGForeignObjectElement 介面。
示例
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" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<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>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # ForeignObjectElement |
瀏覽器相容性
載入中…