在 IE8 中通过 JavaScript 添加多个 VML 元素答案

【问题标题】：Adding multiple VML elements via JavaScript in IE8在 IE8 中通过 JavaScript 添加多个 VML 元素
【发布时间】：2011-12-06 18:34:46
【问题描述】：

使用 IE 8，我试图通过 javascript 添加两个 VML 椭圆 (A,B) 到我的页面。无论哪个椭圆附加到父 DIV 都会被渲染，但第二个不是。

如果我 appendChild(A) 然后 appendChild(B)，椭圆 A 被渲染，B 不是。如果我 appendChild(B) 然后 appendChild(A)，椭圆 B 被渲染，A 不是。

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = Document.getElementById(mydiv);

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = document.createElement("v:oval");
grid.style.left="100px";
grid.style.top="100px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(grid2);
this.container.appendChild(grid);

我错过了添加 VML 的一些技巧吗？

我在 IE 9 中尝试过，结果相同。

由于公司规定，公司内部只支持IE，而且很多用户还在用IE8，所以暂时不能切换HTML5 Canvas。

感谢您的任何建议

【问题讨论】：

为什么不使用Raphaël？这有一个更更干净的 API；并且将为 IE 使用 VML（对其他浏览器使用 SVG），因此您将获得 IE 支持。
HTML 页面的 doctype 是什么，这对在 IE 中渲染 VML 有重要影响？
我已经开始关注 Raphael 库，它看起来很有希望。至于 DOCTYPE，我将验证我所拥有的。大卫，你是对的，根据我的经验，IE 对 DOCTYPE 比其他浏览器更敏感。感谢您的快速建议。

标签： javascript internet-explorer-8 vml

【解决方案1】：

我处理了一个类似的问题，第一个添加到 IE 的 VML 对象正确渲染，但后续的渲染太小而无法看到。

这篇博客文章有助于确定 IE 不再支持 VML 的 set/getAttribute：

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/

结果证明不仅 set/getAttribute 不起作用，甚至直接在 DOM 元素上设置属性（例如 grid2.style.left="300px"）也不起作用。

最终，似乎可行的方法是将每个元素的所有标记生成为一个字符串，然后通过将其设置为另一个元素的 innerHTML 将其注入 DOM。

var html2 = "<v:oval style=\"left: 300px; top: 250px; width: 25pt; height: 75pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker2\"></v:oval>";
var html = "<v:oval style=\"left: 300px; top: 400px; width: 94pt; height: 164pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker\"></v:oval>";

someNode.innerHTML = html2;
someNode2.innerHTML = html;

我创建了一个用于托管 VML 的虚拟节点：设置 innerHTML，然后将其移动到所需的父节点，重复。

丑陋，但它有效！

【讨论】：

【解决方案2】：

使用documentFragment 添加第二个节点：

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = document.documentElement;
var frag = document.createDocumentFragment();

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = frag.appendChild(document.createElement("v:oval"));
grid.style.left="300px";
grid.style.top="400px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(frag);
this.container.appendChild(grid2);

【讨论】：