替代foreignObject爲IE9

我真的很喜歡foreignObject超過SVG顯示HTML的地區，但今天我發現它在IE9不工作（爲什麼我並不感到驚訝）確定。所以我正在尋找一種可以在IE9中使用的替代方法，但似乎很難。使用foreignObject顯示多個HTML元素的好處。替代foreignObject爲IE9

我D3.js力佈局圖是工作在Chrome和FF很大，但在IE9，因爲foreignObject的失敗。我添加了許多HTML元素到Div和更多的CSS的東西。我嘗試用其他XHTML更換foreignObject：格或XHTML：身體，但它不工作

這裏是二小提琴

Working Fiddle

必要在IE9

Modified Fiddle

node.append("foreignObject") 
    .attr("class", "simpleDiv") 
    .attr("width",50) 
    .attr("overflow", "visible") 
    .attr("height", 50) 
    .append("xhtml:div").attr("class", "mainDiv").style("cursor", hoverStyle) 
    .html(function (d) { 
     var htmlString = ""; 
     var userImage = "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX"; 
     htmlString += "<div class='userImage' style='border-color:" + color(d) + "'><image src='" + userImage + "' width='36' height='36'></image></div>"; 
     htmlString += "<div class='content' style='color:" + color(d) + ";'>" + d.name + "</div>"; 
     htmlString += "<div style='clear:both;'></div>"; 
     return htmlString; 
    });

運行

您可以在IE9測試最初的例子也foreignObject

來源

2013-07-30 Amit Rana

我不認爲有可能在IE9中使foreignObject工作。但是對於您的特定任務，爲什麼不只是用<image>和<text>元素渲染用戶圖標和名稱？

來源

2013-08-01 18:01:21 amakhrov

我能做到這一點，但問題是節點的服務器發送列表，具有任意的是用戶，組，或評論聊天等，併爲每個我要創建在SVG自定義節點，使他們看起來不同，你可以看它我在FF或谷歌瀏覽器中工作的小提琴。但我仍然試圖做到這一點，你說它需要時間，但我必須在IE9中運行。 –

替代foreignObject爲IE9

回答

相關問題