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


<svg viewBox="0 0 200 200" xmlns="">
    polygon { fill: black }

    div {
      color: white;
      font:18px serif;
      height: 100%;
      overflow: auto;

  <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="">
      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.



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


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


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


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

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

Global attributes

Core Attributes (en-US)

Most notably: id, tabindex (en-US)

Styling Attributes
class (en-US), style
Conditional Processing Attributes (en-US)

Most notably: requiredExtensions, systemLanguage (en-US)

Event Attributes

Global event attributes (en-US), Graphical event attributes (en-US), Document event attributes (en-US), Document element event attributes (en-US)

Presentation Attributes

Most notably: clip-path, clip-rule (en-US), color, color-interpolation (en-US), color-rendering, cursor (en-US), display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

Aria Attributes

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role




Scalable Vector Graphics (SVG) 2
# ForeignObjectElement


BCD tables only load in the browser