foreignObject

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

浏览器兼容性

BCD tables only load in the browser