Question

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>

Answer 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，可以清除foreignObject内找到的任何非HTML内容。

SVG规范包括有关处理DOM中不在SVG名称空间中的元素的要求，这些要求在SVG片段中，并且不包含在foreignObject元素中。此规范未定义不在HTML命名空间中的SVG片段中的元素的任何处理;从本说明书的角度来看，它们被认为既不符合要求也不符合要求。

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

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

Answer 2

HTML5视频和音频怎么样？

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

Answer 3

我不想回答我自己的问题，但似乎答案是：目前没有超出HTML和MathML的内容（2011年8月）。当新信息出现时，我将删除我的答案。

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

3 个答案: