foreignObject

<foreignObject>SVG元素允许包含不同的XML命名空间。在浏览器的上下文中,很可能是XHTML / 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属性。

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
foreignObjectChrome Full support 1Edge ? Firefox Full support 2IE No support NoOpera Full support 2Safari Full support 3WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?
heightChrome Full support 1Edge ? Firefox Full support 2IE No support NoOpera Full support 2Safari Full support 3WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?
widthChrome Full support 1Edge ? Firefox Full support 2IE No support NoOpera Full support 2Safari Full support 3WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?
xChrome Full support 1Edge ? Firefox Full support 2IE No support NoOpera Full support 2Safari Full support 3WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?
yChrome Full support 1Edge ? Firefox Full support 2IE No support NoOpera Full support 2Safari Full support 3WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown