foreignObject - SVG 编辑

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

html,body,svg { height:100% }

<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属性。

Global attributes

Core Attributes

Most notably: id, tabindex

Styling Attributes

class, style

Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage

Event Attributes

Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes

Presentation Attributes

Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, 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 <foreignObject>	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <foreignObject>	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.