使用语境
| 分类 | 图形元素，可渲染元素 |
|---|---|
| 允许内容 | 任何元素或字符数据 |
属性
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 |
浏览器兼容性
加载中…