当 SVG 嵌入 HTML5 时，foreignObject 元素可以呈现什么？答案

【问题标题】：What can be rendered in foreignObject element when SVG is embedded in HTML5?当 SVG 嵌入 HTML5 时，foreignObject 元素可以呈现什么？
【发布时间】：2011-07-27 18:16:14
【问题描述】：

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>

【问题讨论】：

标签： html svg mathml

【解决方案1】：

从技术上讲，任何可以进入foreignObject标签。问题是用户代理是否会支持它。对此，似乎没有明确的答案。 SVG spec 本身对此非常（故意）模糊：

“foreignObject”元素允许包含一个外部命名空间，其图形内容由不同的用户代理绘制。包含的外来图形内容需要进行 SVG 转换和合成。

幸运的是，规范还 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 内容进行清洗。

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

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

根据我的经验，坚持使用 [X]HTML 将是最兼容的……而且可能是您真正需要的全部。上面的示例都使用父 HTML 命名空间。如您所见，您可以插入来自SVG context 或HTML context 的HTML 文档片段，因此它的用途非常广泛。

【讨论】：

所以一方面你给了我一个规范的答案：规范不会是确定的。您的回复使这个案例非常好并且很有帮助。另一方面，我正在寻找一个务实的答案：今天什么有效？并且至少有 2 种语言可以渲染，HTML 和 MathML。还有什么？
@james，不幸的是我没有更明确的答案......如果确实存在一个，我愿意接受。但我知道“今天有效”取决于浏览器。例如，Chrome (13b) 中的 MathML 呈现为纯文本（与 ALL MathML 一样）。如果您扩展到其他解析器/渲染器（即 Batik），结果将大相径庭。如果您提供它不知道如何呈现的内容，则应该简单地忽略它。但是，我确实找到了对 requiredExtensions 属性的引用（请参阅更新后的帖子）。这至少应该为您提供一种提供回退逻辑的方法。希望这有助于一点更多...
有趣。我以前没有见过后备选项。谢谢。

【解决方案2】：

HTML5 视频和音频怎么样？

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

【讨论】：

同意。但我已经列出了 HTML5。除了 HTML 和 MathML 还有什么？
我认为大多数浏览器支持的标准 Web 技术套件是 HTML、CSS、JavaScript、SVG 和 Canvas。有些也支持 MathML。我认为，除此之外，您开始转向插件和特定于浏览器的功能。例如，您可能可以使用 HTML 对象标签将 Flash 电影和 Java 小程序嵌入到 SVG 中，在 foreignObject 标签内。您可能还可以将一些奇怪的旧 Internet Explorer 内容放入其中。你还有什么想法？
嗯，嗯，正是我问的。 svg 元素中的 foreignObject 元素可以使用哪些语言，该元素是当今浏览器可以呈现的 HTML5 页面的一部分。可能 HTML 和 MathML 是唯一的答案。如果是这样，那没关系。

【解决方案3】：

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

【讨论】：