替代IE9的foreignObject [英] alternative to foreignObject for IE9

问题描述

我真的很喜欢foreignObject显示svg的HTML区域，但今天我发现它不工作在IE9（为什么我不惊讶）
确定。所以我正在寻找一个替代工程在IE9，但似乎很难。使用foreignObject来显示多个HTML元素是一件好事。

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.

我的D3.js强制布局图在Chrome和FF中运行良好，但在IE9中， 。我添加了许多HTML元素到Div和更多的CSS东西。
我试图替换foreignObject与其他xhtml：div或xhtml：body但它不工作

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

这里是两个Fiddles

here is two Fiddles

工作小提琴

需要在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

you can test original example in IE9 also foreignObject

推荐答案

我不认为这可能使IE 。
但是对于你的特定任务，为什么不只是渲染用户图标和名称< image> 和< text> 元素？

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?

这篇关于替代IE9的foreignObject的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！