6

私は、svg で HTML 領域を表示する ForeignObject が本当に好きですが、今日、IE9 では機能しないことがわかりました (なぜ驚かないのですか)。だから私はIE9で動作する代替手段を探していますが、難しいようです. ForeignObject を使用して複数の HTML 要素を表示することの優れた点。

私の D3.js Force レイアウト グラフは chrome と FF でうまく機能していますが、IE9 ではforeignObject が原因で失敗します。多くの HTML 要素を Div に追加し、CSS も追加します。foreignObject を他の xhtml:div または xhtml:body に置き換えようとしましたが、うまくいきません

ここに2つのフィドルがあります

働くフィドル

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

IE9でforeignObjectを機能させることはできないと思います。しかし、特定のタスクでは、ユーザー アイコンと名前を<image>and<text>要素でレンダリングしないのはなぜでしょうか?

于 2013-08-01T18:01:21.100 に答える