HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了当SVG嵌入HTML5时,在externalObject元素中可以呈现什么?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5通过svg元素支持SVG.可以使用foreignObject元素在SVG中嵌入其他语言. HTML可以像MathML一样呈现.今天的浏览器还能呈现什么? (简单的例子赞赏)

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>

解决方法

从技术上讲,任何东西都可以放在foreignObject标签中.问题是用户代理是否会支持它.为此,似乎没有明确的答案. SVG spec本身对此非常(有意)含糊不清:

幸运的是,规范也是defines @L_675_8@属性,它接受以空格分隔的命名空间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内容.

原始帖子指出“HTML可以呈现……就像MathML一样”.由于< math>元素现在是standard HTML5,我相信浏览器会将该代码解释为HTMl.因此,从技术角度来说,将浏览器渲染MathML作为HTML的一部分在技术上更为正确.

根据我的经验,坚持使用[X] HTML将是最兼容的…而且可能只是你真正需要的.上面的示例都使用父HTML命名空间.如您所见,您可以从SVG contextHTML context插入HTML文档片段,因此它可以非常通用.

大佬总结

以上是大佬教程为你收集整理的当SVG嵌入HTML5时,在externalObject元素中可以呈现什么?全部内容,希望文章能够帮你解决当SVG嵌入HTML5时,在externalObject元素中可以呈现什么?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。