javascript - IE9的ForeignObject的替代

我真的很喜欢foreignObject在svg上显示HTML区域，但是今天我发现它在IE9中不起作用(为什么我不感到惊讶)
好的。所以我正在寻找在IE9中可以使用的替代方法，但这似乎很困难。使用foreignObject显示多个HTML元素的伟大之处。

我的D3.js Force布局图在chrome和FF中效果很好，但是在IE9中，由于foreignObject而失败。我在Div中添加了许多HTML元素，还添加了更多CSS内容。
我尝试用其他xhtml:div或xhtml:body替换foreignObject，但是它不起作用

这是两个 fiddle

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

最佳答案

我认为无法在IE9中使用foreignObject。
但是对于您的特定任务，为什么不只使用<image>和<text>元素来呈现用户图标和名称呢？

关于javascript - IE9的ForeignObject的替代，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17950208/