foreignObject元素中的HTML(canvas元素)示例：
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="200" height="100">
<canvas id="myCanvas" width="200" height="100"></canvas>
</foreignObject>
</svg>
<script>
var canvas1 = document.getElementById("myCanvas");
var context1 = canvas1.getContext("2d");
context1.fillStyle = "lightblue";
context1.fillRect(20,40,50,50);
</script>
</body>
</html>
foreignObject元素中的MathML示例(使用FF5)：
<!DOCTYPE html>
<html>
<body>
<svg id="svg1" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="50" y="50" width="100" height="100">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</foreignObject>
</svg>
</body>
</html>
解决方法
The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
幸运的是,规范也是defines requiredExtensions属性,它接受以空格分隔的命名空间URI列表.这与switch语句一起允许基于用户代理功能的半智能回退逻辑. Example：
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<switch>
<!-- Render if extension is available -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/foreign-object-spec-uri">
<!-- Foreign object content -->
</foreignObject>
<!-- Else,do fallback logic -->
<text x="0" y="20">Not available</text>
</switch>
</svg>
实际渲染的内容似乎完全取决于用户代理(浏览器,Batik等).因此,类似地,HTML5规范有一个short blurb,它可以处理foreignObjects中的任何非HTML内容.
The SVG specification includes requirements regarding the handling of elements in the DOM that are not in the SVG namespace,that are in SVG fragments,and that are not included in a foreignObject element. This specification does not define any processing for elements in SVG fragments that are not in the HTML namespace; they are considered neither conforming nor non-conforming from the perspective of this specification.
原始帖子指出“HTML可以呈现……就像MathML一样”.由于< math>元素现在是standard HTML5,我相信浏览器会将该代码解释为HTML.因此,从技术角度来说,将浏览器渲染MathML作为HTML的一部分在技术上更为正确.
根据我的经验,坚持使用[X] HTML将是最兼容的…而且可能只是你真正需要的.上面的示例都使用父HTML命名空间.如您所见,您可以从SVG context或HTML context插入HTML文档片段,因此它可以非常通用.
