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


Global attributes

Core Attributes
Most notably: id, tabindex (en-US)
Styling Attributes
class (en-US), style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage (en-US)
Event Attributes
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
Presentation Attributes
Most notably: clip-path, clip-rule (en-US), color, color-interpolation (en-US), color-rendering (en-US), 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




Specification Status Comment
Scalable Vector Graphics (SVG) 2
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Recommendation Initial definition


BCD tables only load in the browser