foreignObject

foreignObject元素允许包含外来的XML命名空间，其图形内容是别的用户代事绘制的。这个被包含的外来图形内容服从SVG变形和合成。

foreignObject的内容被假定是来自不同的命名空间。一个foreignObject内部的任何SVG元素都不会被绘制，除非是这种情况：一个正确定义的带着合适的xmlns属性规范的SVG子文档是递归嵌入的。这一种情况可能出现于一个SVG文档片段嵌入在另一个非SVG文档片段中，它反过来又嵌在一个SVG文档片段内（例如，一个SVG文档片段包含了一个XHTML文档片段反过来包含了另一段SVG文档片段。）

foreignObject元素通常与<switch>元素和requiredExtensions属性联用，对用户代理支持作一个适合性标准化验，并在万一用户代理支持不可用的时候提供一个替代呈现。

用法

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

示例

<svg width="400px" height="300px" viewBox="0 0 400 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>This example uses the 'switch' element to provide a
        fallback graphical representation of a paragraph, if
        XHTML is not supported.</desc>
  <!-- The 'switch' element will process the first child element
       whose testing 属性 evaluate to true.-->
  <switch>
    <!-- Process the embedded XHTML if the requiredExtensions attribute
         evaluates to true (i.e., the user agent supports XHTML
         embedded within SVG). -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://www.w3.org/1999/xhtml">
      <!-- XHTML content goes here -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
      </body>
    </foreignObject>
    <!-- Else, process the following alternate SVG.
         Note that there are no testing 属性 on the 'text' element.
         If no testing 属性 are provided, it is as if there
         were testing 属性 and they evaluated to true.-->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Here is a paragraph that</tspan>
      <tspan x="10" y="20">requires word wrap.</tspan>
    </text>
  </switch>
</svg>

属性

全局属性

专有属性

DOM接口

该元素实现了SVGForeignObjectElement接口。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.9 未实现 2.0 3.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 18.0 2.0 未实现 2.0 3.0

该表格基于这些资源。

文档标签和贡献者