当 SVG 嵌入到 HTML5 中时，foreignObject 元素中可以渲染什么？

问题描述 投票：0回答：4

HTML5 通过 

svg
元素支持 SVG。其他语言可以使用 
foreignObject
元素嵌入到 SVG 中。 HTML 可以用这种方式呈现，MathML 也可以。当今的浏览器还可以呈现什么？ （简单的例子值得赞赏）

canvas
元素内的 HTML（
foreignObject
元素）示例：

<!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>
html svg mathml
4个回答
10
投票

从技术上讲，任何东西都可以放入

foreignObject
标签中。问题是用户代理是否支持它。对于这一点，似乎没有明确的答案。 SVG 规范本身（故意）对此非常模糊：

“foreignObject”元素允许包含外部名称空间，该名称空间的图形内容由不同的用户代理绘制。所包含的外国图形内容需经过 SVG 转换和合成。

幸运的是，该规范还定义了 

requiredExtensions
属性，该属性接受以空格分隔的命名空间 URI 列表。这与 switch 语句相结合，允许基于用户代理功能的半智能回退逻辑。 示例：

<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 规范有一个简短的简介，对 

foreignObject
s 中发现的任何非 HTML 内容敬而远之。

SVG 规范包括有关处理 DOM 中不属于 SVG 命名空间、位于 SVG 片段中以及不包含在foreignObject 元素中的元素的要求。本规范没有定义对不在 HTML 命名空间中的 SVG 片段中的元素的任何处理；从本规范的角度来看，它们既不符合也不不符合。

原帖指出“HTML 可以被渲染……就像 MathML 一样”。由于 

<math>
元素现在是 标准 HTML5，我相信浏览器正在将该代码解释为 HTML。因此，从技术上来说，更正确的说法是浏览器将 MathML 渲染为HTML 的部分。

根据我的经验，坚持使用 [X]HTML 将是最兼容的......并且可能是您真正需要的一切。上面的示例都是通过使用父 HTML 命名空间来工作的。如您所见，您可以从 SVG 上下文 或 HTML 上下文 插入 HTML 文档片段，因此它非常通用。

3
投票

HTML5 视频和音频怎么样？

演示：http://double.co.nz/video_test/video.svg

1
投票

我不想回答我自己的问题，但似乎答案是：此时（2011 年 8 月）除了 HTML 和 MathML 之外什么都没有。当新信息出现时，我会删除我的答案。

0
投票

您还可以嵌入 XML（+ XSLT 或 CSS）、XHTML（+ CSS），提供良好的 xmlns...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.