thay thế cho nước ngoàiObject cho IE9

Question

tôi thực sự thích nước ngoài để hiển thị vùng HTML trên svg, nhưng hôm nay tôi phát hiện ra rằng nó không hoạt động trong IE9 (tại sao tôi không ngạc nhiên) ok. Vì vậy, tôi đang tìm kiếm một thay thế mà làm việc trong IE9, nhưng có vẻ như khó khăn. Điều tuyệt vời khi sử dụng ForeignObject để hiển thị nhiều phần tử HTML.

Biểu đồ bố cục Force D3.js của tôi hoạt động tốt trong chrome và FF, nhưng trong IE9 nó không thành công do ngoại lệ. tôi thêm nhiều phần tử HTML vào Div và nhiều thứ CSS nữa. tôi cố gắng thay thế foreignObject với xhtml khác: div hoặc xhtml: cơ thể nhưng nó không làm việc

đây là hai Fiddles

Working Fiddle

cần phải chạy trên 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; 
    }); 

bạn có thể kiểm tra ví dụ ban đầu trong IE9 cũng foreignObject

Answer 1

Tôi không nghĩ rằng nó có thể làm cho ForeignObject hoạt động trong IE9. Nhưng đối với công việc cụ thể của bạn, tại sao không chỉ hiển thị biểu tượng và tên người dùng với các yếu tố <image> và <text>?