当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本身对此非常(有意)含糊不清：

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文档片段,因此它可以非常通用.

当SVG嵌入HTML5时,在externalObject元素中可以呈现什么？

解决方法

相关文章