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.

SVG中的 <foreignObject> 元素允许包含来自不同的 XML 命名空间的元素。在浏览器的上下文中,很可能是 XHTML / HTML。

示例

html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    polygon {
      fill: black;
    }

    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 embeded into HTML, the XHTML namespace could
      be avoided, 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; 是否可设置动画: yes

width

设置 foreignObject 的宽度。 值得类型:<length>|<percentage> ; 默认值: auto; 是否可设置动画: yes

x

设置 foreignObject 的 x 坐标。 值得类型:<length>|<percentage> ; 默认值: 0; 是否可设置动画: yes

y

设置 foreignObject 的 y 坐标。 值得类型:<length>|<percentage> ; 默认值: 0; 是否可设置动画: yes

备注: 从 SVG2 开始,x、y、宽度和高度都是几何属性,这意味着这些属性也可以用作该元素的 CSS 属性。

使用上下文

类别图形元素、可渲染元素
允许的内容任意元素或字符数据

规范

Specification
Scalable Vector Graphics (SVG) 2
# ForeignObjectElement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
foreignObject
height
systemLanguage
width
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support