SVG参考手册
分类 | Elements
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
具体属性
x
y
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 |
加载中,请稍侯......