HTML 5、内联 SVG 和 SVG DOM 的命名空间感知答案

【问题标题】：HTML 5, inline SVG, and namespace awareness for SVG DOMHTML 5、内联 SVG 和 SVG DOM 的命名空间感知
【发布时间】：2014-06-12 17:27:27
【问题描述】：

以下问题让我感到困惑。我知道他们是相关的，但是......

是否支持 HTML 5 命名空间（包括 SVG/其他 XML 方言的标签）？
如果不是，那么这个怎么办——

我已经阅读了这个old 链接，但我完全糊涂了......因为 Mozilla 说“要动态修改内联 SVG，需要编写脚本 this 方式” - 所以最后，我怎样才能动态修改内联SVG（如果 HTML 5 不支持命名空间）？
或者页面需要作为 (X)HTML 5 提供？

细节 -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello-SVG</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="0" y="0" width="100" height="100" fill="blue"></rect>
    </svg>
</body>
</html>

以上代码是在 HTML 5 中渲染 rect（使用 SVG）的正确方法。现在，要使用 JavaScript 修改 SVG，Mozilla 建议使用 this API。我的问题是，如果 HTML 5 不支持命名空间，那么这样做有什么意义？对于这种情况，浏览器会自动切换到 (X)HTML 5 吗？

我阅读了关于 SO 的 this 评论，我发现它最接近我正在寻找的答案 -

我猜 HTML 5 SVG 的情况基本上是“没有命名空间的 SVG 在解析期间添加了命名空间（但之后就像之前的 (X)HTML）”。

【问题讨论】：

标签： javascript html svg xhtml

【解决方案1】：

HTML5 定义了 HTML、XHTML 和 DOM。

DOM 是命名空间感知的。使用 DOM 方法时，必须考虑每个元素所在的命名空间，但默认为 HTML (http://www.w3.org/1999/xhtml) 命名空间。

HTML 和 XHTML 是通过解析转换成 DOM 的序列化。

XHTML 是命名空间感知的，XHTML 文档根据 XML 规则应用命名空间，因此所有 命名空间必须明确分配给每个元素。使用 XML 解析器将 XHTML 转换为 DOM。

HTML 也可以识别命名空间，但命名空间是隐式分配的。使用 HTML 解析器将 HTML 转换为 DOM，该解析器知道哪些元素位于哪个命名空间中。也就是说，它知道<div> 进入http://www.w3.org/1999/xhtml 命名空间，而<svg> 进入http://www.w3.org/2000/svg 命名空间。像<script> 这样的元素可以进入http://www.w3.org/1999/xhtml 或http://www.w3.org/2000/svg 命名空间，具体取决于它们在HTML 代码中出现的上下文。

HTML 解析器知道HTML elements、SVG elements 和MathML elements 以及没有其他人。没有选项可以使用来自其他命名空间的元素，既不是隐式的也不是显式的。即xmlns属性没有作用。

【讨论】：

但是，从this experiment 来看，不可能通过 HTML5 标记来分配明确的命名空间。不过，您可以通过编程方式创建具有显式命名空间的元素或属性。
@tomekwi - 这就是答案所说的 - 您在实验中使用的 HTML5 的 HTML 序列化是不可能的。可以使用 DOM API，即您所说的“以编程方式”。
@Alohci SVG xlink 命名空间w3.org/1999/xlink 怎么样？当我省略 xmlns:xlink 声明和使用 href 属性上的 xlink 前缀时，Chrome 不会将 href 放入 w3.org/1999/xlink 命名空间，并且不再正确呈现 SVG 元素。是 Chrome 的错误吗？
@hfmanson - 你是对的，这不是错误。元素仅限于 HTML、SVG 和 MathML 命名空间。在 SVG 和 MathML 元素上，HTML 解析器将一些属性映射到 XML、XMLNS 和 XLINK 命名空间，如果它们分别以“xml:”、“xmlns:”或“xlink:”开头。请注意，它们不像 XML 前缀，可分配给任意名称空间，它们只是具有固定分配的神奇属性名称。详情在w3.org/TR/html51/syntax.html#attributes-2:foreign-elements-2
@Melab。没关系。命名空间名称只是一个无意义的字符串，在这种情况下恰好包含字符序列“xhtml”。