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文档片段,因此它可以非常通用.
原文地址:https://www.jb51.cc/html5/168317.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。