如果在运行时将内联 SVG 插入到文档中，它可以在 HTML4 中工作吗？答案

【问题标题】：inline SVG works in HTML4 if it's inserted to the document in the runtime?如果在运行时将内联 SVG 插入到文档中，它可以在 HTML4 中工作吗？
【发布时间】：2017-02-13 20:06:02
【问题描述】：

我正在尝试在 HTML4 文档中内联 SVG。有人建议我可能有一些问题，因为 HTML4 不支持内联 SVG，所以我应该用 XHTML 代替。

有趣的是，虽然支持内联 SVG 不是 HTML4 标准的一部分，但使用 WebKit 的浏览器应该对内联 SVG 感到满意，因为它的解析器能够解析 HTML5，而 HTML5 完全支持内联 SVG。不幸的是，Firefox 不在同一个联盟中。

但是，如果我在运行时使用 JavaScript 将 SVG 节点附加到容器中，FF 也可以（见下文。我从 jquery svg 中得到了这个想法，一个插件- 用于 jquery）。 为什么可以这样做？ 在我看来这太好了，难以置信。（我是 JavaScript 编程的完全新手，可能遗漏了一些非常明显的东西......）

function onloadSVG(div_container) {
    var svgE = document.createElementNS('http://www.w3.org/2000/svg',
        'svg');
    svgE.setAttribute('version', '1.1');
    svgE.setAttribute('width', div_container.clientWidth);
    svgE.setAttribute('height', div_container.clientHeight);
    div_container.appendChild(svgE);

    var node = svgE.ownerDocument.createElementNS('http://www.w3.org/2000/svg',
        'circle');
    node.setAttribute('cx', '100');
    node.setAttribute('cy', '100');
    node.setAttribute('r', '50');
    node.setAttribute('fill', 'red');
    node.setAttribute('stroke', 'black');
    node.setAttribute('stroke-width', '5');
    svgE.appendChild(node);
}

【问题讨论】：

请问：为什么不直接输入SVG in XHTML？它在所有支持 SVG 的浏览器中都能正常工作，并且不需要 JS hack。
感谢您的建议，但我做不到。我正在为实验语言开发一个库。到目前为止，它只生成 HTML。

标签： javascript jquery html svg

【解决方案1】：

几个原因：

HTML4 和 DOM 不是一回事。

HTML 只是说明需要创建哪些 DOM 节点的一种方式，但 DOM 可以做的远不止这些。这就像将文件解压缩到文件系统。您的文件系统可以支持符号链接、硬链接、fifos、权限以及 ZIP 无法支持的所有花哨的东西。

即使没有 SVG，您也可以创建没有 HTML 语法的 DOM。您可以嵌套<optgroup>，将<ol> 放入<p>，将文本插入<br></br>，等等。

浏览器（IE 除外）只有一个引擎

禁用浏览器支持的功能需要付出额外的努力，但在编写某些规范时不需要返回。当给定 HTML 3.2 时，浏览器将支持 CSS 和 <table>。即使在 HTML4 Strict 中，它们也会支持 <font>。

浏览器仅对 quirks 模式和application/xhtml+xml 模式的某些行为进行特殊处理，这是兼容性/一致性的最低要求。由于 HTML DOM 中缺乏对 SVG 的支持对于兼容性和一致性来说都不是必需的，因此花时间禁用它是没有意义的。

【讨论】：

【解决方案2】：

有根据的猜测：它之所以有效，是因为浏览器习惯于 99% 的网络做错事。

命名空间是 XML/XHTML 的一部分，而不是 HTML； createElementNS 方法在那里使用毫无意义。但是，当您尝试在 HTML 文档上创建命名空间元素时，它并没有采用一些固定的内部模式，而是顺其自然。

至于它是否在内部区分文档类型，我不知道。但是就像您可以创建带有完全损坏的标记的完全无效的文档，并且浏览器会尽最大努力尊重您的意图（除非您将 XHTML 作为application/xhtml+xml 提供服务），所以它在这里为您提供了最好的水平。

【讨论】：