<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 开始,xywidthheight几何属性,这意味着这些属性也可以用作该元素的 CSS 属性。

使用上下文

类别
允许的内容任何元素或字符数据

规范

规范
可缩放矢量图形 (SVG) 2
# ForeignObjectElement

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。