3

使用 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。

感谢您的任何建议

4

2 回答 2

3

我处理了一个类似的问题，其中添加到 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，然后将其移动到所需的父节点，重复。

丑陋，但它的工作！

于 2012-10-02T21:18:06.197 回答
0

使用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);
于 2012-01-20T23:05:03.840 回答