foreignobject

<foreignobject>

<foreignObject>SVG元素允许用于包括具有由不同的用户代理绘制其图形内容的外国XML命名空间的。包含的外部图形内容受SVG转换和合成的影响。

foreignObject假定内容来自不同的名称空间。a中的任何SVG元素foreignObject都不会被绘制，除非在正确定义的具有适当xmlns属性指定的SVG子文档被递归嵌入的情况下。出现这种情况的一种情况是，当一个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 attributes 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 attributes on the 'text' element.
         If no testing attributes are provided, it is as if there
         were testing attributes 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>

属性

全局属性

Conditional processing attributes

Core attributes

Graphical event attributes

Presentation attributes

class

style

externalResourcesRequired

transform

具体属性

width

height

DOM接口

这个元素实现了SVGForeignObjectElement接口。

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<foreignObject>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<foreignObject>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.9	No support	2.0	3.0

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	18.0	2.0	No support	2.0	3.0