8

svgHTML5 通过元素支持 SVG 。其他语言可以使用该foreignObject元素嵌入到 SVG 中。HTML 可以这样呈现，MathML 也可以。今天的浏览器还能呈现什么？（简单的例子赞赏）

元素内的HTML（canvas元素）示例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>

元素内的 MathML 示例foreignObject（使用 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>
4

3 回答 3

9

从技术上讲，任何东西都可以放入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 规范有一个简短的简介，对foreignObjects.

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

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

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

于 2011-08-04T16:15:55.687 回答
3

HTML5 视频和音频怎么样？

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

于 2011-07-27T21:51:42.970 回答
1

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

于 2011-08-15T18:40:51.303 回答