6

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

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

这是两个小提琴

工作小提琴

需要在IE9上运行

修改过的小提琴

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

4

1 回答 1

0

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

于 2013-08-01T18:01:21.100 回答