javascript - IE9 的 foreignObject 替代品

Question

我真的很喜欢 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

Answer 1

我不认为让 foreignObject 在 IE9 中工作是可能的。但是对于您的特定任务，为什么不使用 <image> 渲染用户图标和名称呢？和 <text>元素？