SVG nội tuyến trong HTML, với Firefox 3.5

Question

Tôi đang cố tạo một số nội dung HTML/SVG hỗn hợp và gặp một số sự cố. Nội dung HTML hiển thị như mong đợi, nhưng SVG nội tuyến thì không. Vì vậy, tôi làm một số thí nghiệm.

Tôi tìm các trang web có ví dụ về SVG nội tuyến và chúng hiển thị chính xác trên hệ thống của tôi. Vì vậy, tôi "xem nguồn trang" và sao chép/dán HTML/SVG vào một tệp cục bộ khác và mở tệp này trong Firefox. Không hiển thị SVG nội tuyến.

Tôi cũng đã thử cùng một thử nghiệm với Chrome, cùng một kết quả.

Tôi có thể thiếu gì?

Cập nhật
thay đổi nhỏ trong nhận dạng trên một phần của tôi: k montgomery -> kmontgom vào sử dụng OpenID.

Dù sao thì nhờ tất cả những ai đã trả lời. Giải pháp tốt nhất là thiết lập Response.ContentType; điều này cho phép tôi tiếp tục với phương pháp WebForms ngay bây giờ.

Tôi đã dự tính tạo nội dung XHTML thuần túy trong các tệp .xml và sử dụng ASP.NET MVC để phân phối nội dung đó. Tôi có thể sẽ làm điều đó trong tương lai.

Bây giờ, trở đi với jQuery, SVG và làm điều gì đó làm điều gì đó.

Cảm ơn tất cả sự trợ giúp.

Answer 1

Hãy chắc chắn để đặt tên cho tập tin ".xml" không phải là ".html"

Answer 2

Để inline SVG được hiển thị trong trình duyệt, trang phải được XHTML hợp lệ và phải được phục vụ với application/xhtml + xml tiêu đề phản hồi máy chủ kiểu mime.

Nó cũng có thể để kéo nội dung SVG nội tuyến từ trang HTML là tốt, xem ví dụ về một hình ảnh SVG Tiger mà cũng có thể được xem trong trình duyệt Internet Explorer (5.5+)

Answer 3

Như Greg nói, nó cần phải được một tệp mà Firefox nhận dạng dưới dạng tệp XHTML, không chỉ HTML thông thường, đó là những gì đổi tên đã hoàn thành. Để nhận được điều đó từ ứng dụng phía máy chủ, bạn cần đặt tiêu đề Content-type của phản hồi thành application/xhtml+xml.

Answer 4

Một giải pháp thay thế nếu bạn không muốn thực hiện XHTML là mã hóa base64 dữ liệu SVG.

ví dụ:

<object type="image/svg+xml" 
     data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object> 

Tôi nghĩ rằng đây có thể không phải là điều bạn muốn cụ thể cho hoàn cảnh của mình, nhưng dù sao, có thể hữu ích cho người khác.

Answer 5

Như những lưu ý khác, miễn là bạn đang sử dụng XHTML và không gian tên của bạn là chính xác, bạn tốt để đi - bạn chỉ có thể sử dụng thẻ <svg> ngay trong HTML.

Tôi thấy trong thử nghiệm rằng nó chỉ hoạt động thực sự tốt trong Firefox 4 và các bản dựng Chrome gần đây, nhưng YMMV. Đối với nội dung trên mạng nội bộ, nơi bạn biết mọi người đang sử dụng trình duyệt phong nha, điều này là tốt.

Tôi đã thực hiện một số experimentation in generating inline SVG using JavaScript. Vui lòng kiểm tra điều đó, bạn có thể thấy mã hữu ích.

Answer 6

Nếu bạn tự động tạo SVG bằng javascript nó hoạt động nội dòng. Thay vì:

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000"> 
     <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" /> 
    </svg> 

Bạn viết:

<script> 
     var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg/"); 
     svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); 
     svg.setAttribute("height", "1000"); 
     svg.setAttribute("width", "1000"); 
     document.body.appendChild(svg); 
     var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
     rect.setAttribute("id", "myrect"); 
     rect.setAttribute("x", "0"); 
     rect.setAttribute("y", "0"); 
     rect.setAttribute("rx", "0"); 
     rect.setAttribute("ry", "0"); 
     rect.setAttribute("width", "200"); 
     rect.setAttribute("height", "300"); 
     rect.setAttribute("fill", "yellow"); 
     rect.setAttribute("stroke", "purple"); 
     rect.setAttribute("stroke-width", "5"); 
     svg.appendChild(rect); 
    </script> 

Đó không phải là lý tưởng nhưng có vẻ như để làm việc.

Answer 7

Đối với những người có vấn đề này với ASP.NET, thay đổi loại tài liệu được sang HTML5 và content-type để application/xhtml + xml, tôi đã cố gắng nó trên IE9, FF 3.6 và Chrome 13:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
..... 
etc 

Và ở mã sau:

protected void Page_Load(object sender, EventArgs e) 
{ 
this.Response.ContentType = "application/xhtml+xml"; 
}