SVG 外来对象在更改之前不显示答案

【问题标题】：SVG Foreign Object not displaying until changedSVG 外来对象在更改之前不显示
【发布时间】：2015-06-11 02:30:25
【问题描述】：

我正在向一个 svg 元素添加一个外来对象，该元素是一个 id 为“all”的组。我这样做时没有出现异物。

但是，如果我使用 chrome 的检查元素工具，并对元素视图中的外来对象进行任何更改，该对象就会出现。

var panel = document.createElement('div');
panel.className = 'panel';

var foreign = document.createElementNS("http://www.w3.org/2000/svg", 'foreignobject');
foreign.setAttribute('width' , '202');
foreign.setAttribute('height', '122');
foreign.setAttribute('transform', 'translate(0 0)');

all.appendChild(foreign);

foreign.appendChild(panel);

这对我来说似乎很奇怪。我做错了什么？

谢谢，山姆。

【问题讨论】：

标签： javascript html svg namespaces

【解决方案1】：

SVG 是区分大小写的语言，正确的标签名称是 foreignObject

【讨论】：

我很想知道为什么检查元素并对其进行编辑会导致它出现。你知道这是为什么吗？
因为检查它会导致 http 解析器重新解析它，并且 http 解析器神奇地修复了一些问题，试图让开发人员的生活更轻松。
html 解析器最初不是用来解析的吗？将html添加到页面时解析和使用开发者工具编辑元素时解析有什么不同？
不，document.createElementNS 是一个 DOM 调用，它不会调用 html 解析器。