SVG externalObject không hiển thị trong Chrome

Tôi có phần tử SVG với một ExternalObject chứa div. Sau đó, trong js của tôi, tôi làm điều này:SVG externalObject không hiển thị trong Chrome

$("#wrapper>svg>foreignObject>div").sparkline(data);

tạo canvas trong div. Khi tôi nhìn vào mã firebug html cho hai trình duyệt là:

Firefox:

<svg> 
    <foreignObject width="20" height="20" x="10" y="-10"> 
     <div> 
      <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas> 
     </div> 
    </foreignObject> 
</svg>

Chrome:

<svg> 
    <foreignobject width="20" height="20" x="10" y="-10"/> 
<svg>

Trong chrome nó doesnt thậm chí hiển thị các div. Cách tôi tạo div là

nodeEnter.append("foreignObject") 
    .attr("width", "20") 
    .attr("height", "20") 
    .attr("x", "10") 
    .attr("y","-10"); 

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox đang hoạt động như tôi đang mong nó hoạt động. Nhưng chrome thì không. Có ai có bất cứ đề nghị?

Ngoài ra, tôi nghĩ một phần của vấn đề là đầu ra HTML firebug HTML hiển thị "ngoại lệ" nhưng Firefox hiển thị "externalObject" theo cách tôi nối.

Nguồn

2012-06-25 ßee

Bạn cần có một phần tử HTML là phần tử con của ngoại lệ. Một khi bạn có nó, bạn có thể đặt bất cứ thứ gì bên trong cơ thể.

Nguồn

2012-07-13 13:41:39 Demosthenes

Cool @Demosthenes cảm ơn nó đã hoạt động. –

Có thể đáng cập nhật điều này vì Chrome dường như đã thay đổi hành vi của nó và phần tử con bây giờ phải là được bọc - cạnh kỳ lạ không quan tâm theo cách nào. Không có không gian tên là cần thiết cho cả hai trình duyệt (nhưng những người khác vẫn có thể cầu kỳ). – dav1dsm1th

Chỉ để thêm vào cuộc trò chuyện, đây là một số đánh dấu. Chrome và Firefox hoạt động khác nhau và các thẻ kiểu này đã loại bỏ sự khác biệt (thêm vào thiết lập lại html?) Bạn dường như không cần một cơ thể HTML nhiều như tham chiếu không gian tên xmlns trên thẻ, có thể là body hoặc chỉ đơn giản là div. Ngoài ra, bạn có thể muốn xem xét một thẻ svg switch để kiểm tra các tính năng được hỗ trợ.

<!doctype html><html><body> 

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px"> 
    <foreignObject width="100" height="57"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative; 
     width:100px;height:57px;overflow:hidden;font-family:Arial; 
     font-weight:400;font-size:12px;line-height:100%;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod 
      tempor incididunt ut labore 
    </div> 
    </foreignObject> 
</svg> 

</body></html>

Nguồn

2016-05-09 20:07:03

SVG externalObject không hiển thị trong Chrome

Trả lời

Các vấn đề liên quan