Question

我真的很喜欢foreignObject在svg上显示HTML区域，但是今天我发现它在IE9中不起作用（为什么我不感到惊讶）好。所以我正在寻找一种适用于IE9的替代方案，但似乎很难。使用foreignObject显示多个HTML元素的好处。

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

这里有两个小提琴

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

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

IE9的foreignObject的替代品

1 个答案: