alternative to foreignObject for IE9

问题

i really like foreignObject to show HTML regions over svg, but today i found out that it doesnt work in IE9 (why am i not surprised) ok. So i am looking for an alternative that works in IE9, but it seems difficult. The great thing of using foreignObject to display multiple HTML elements.

My D3.js Force layout graph is working great in chrome and FF , but in IE9 it fail because of foreignObject . i add many HTML elements in to Div and also more CSS stuff. I try to replace foreignObject with other xhtml:div or xhtml:body but it's not working

here is two Fiddles

Working Fiddle

need to run on 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;
     });

you can test original example in IE9 also foreignObject

回答1:

I don't think it's possible to make foreignObject work in IE9. But for your particular task why not just render the user icon and name with <image> and <text> elements?

来源：https://stackoverflow.com/questions/17950208/alternative-to-foreignobject-for-ie9