在IE8中通過JavaScript添加多個VML元素

使用IE 8，我試圖通過javascript在頁面上添加兩個VML橢圓（A，B）。無論將哪個橢圓添加到父DIV中，都會呈現，但第二個不是。在IE8中通過JavaScript添加多個VML元素

如果我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。

感謝您的任何建議

來源

2011-12-06 Scott S

爲什麼不使用[Raphaël]（http://raphaeljs.com/）？這有一個*多*清潔API;並將使用VML for IE（和其他瀏覽器的SVG），所以你將有IE支持。 – vcsjones

什麼是HTML頁面的文檔類型，這使得在IE中渲染VML有一個重要的區別？ – David

我已經開始看拉斐爾圖書館，它看起來很有希望。至於DOCTYPE，我會驗證我的。大衛，你說的對，根據我的經驗，IE對DOCTYPE和其他瀏覽器更爲敏感。感謝您的快速建議。 –

使用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-20 23:05:03

我處理了類似的問題，其中第一個VML對象添加到IE渲染正確，但隨後的那些人呈現太小而看不到。

這篇博客文章中確定IE不支持設置/的getAttribute爲VML是有幫助的了：

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

事實證明，不僅做到設置/的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-02 21:18:06 Matt

在IE8中通過JavaScript添加多個VML元素

回答

相關問題