<foreignObject>
<foreignObject>
SVG 元素包含来自不同 XML 命名空间的元素。在浏览器的上下文中,它最可能是 (X)HTML。
示例
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>
属性
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 属性。
使用上下文
类别 | 无 |
---|---|
允许的内容 | 任何元素或字符数据 |
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # ForeignObjectElement |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。