Làm cách nào để kết hợp SVG và HTML vào một trang?

Tôi đã sử dụng jQuery.svg plugin để thực hiện một số kết xuất SVG và nó hoạt động hoàn hảo nhưng tôi cũng muốn máy chủ hiển thị một số SVG vào trang và tôi không thể làm việc đó. Làm thế nào để thêm một số SVG như dưới đây vào trang để Firefox sẽ hiển thị nó?Làm cách nào để kết hợp SVG và HTML vào một trang?

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" > 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    </head> 

    <body> 

    <div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div> 

    <svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/> 
    </svg> 


    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px"> 
     <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/> 
    </svg:svg> 

    </body> 
</html>

Tôi có cần thẻ meta cho biết có nội dung SVG trong trang hoặc xác định không gian tên SVG bằng cách nào đó không?

Nguồn

2010-03-11 John Duff

Xem this link (Giới thiệu về SVG trong HTML @ Trung tâm nhà phát triển Mozilla).

Ví dụ về SVG nội tuyến can be seen here.

Nguồn

2010-03-11 21:40:09 ChristopheD

Tôi xem xét các liên kết đó và thêm các tham chiếu xmlns bị thiếu và nó vẫn không hoạt động. Tôi đã cập nhật câu hỏi bằng một trang html đầy đủ không hoạt động, tôi đang thiếu gì? –

Máy chủ web của bạn sử dụng tiêu đề nào? Xem trang này (tiếc là chỉ trong bộ nhớ cache của google: http://74.125.77.132/search?q=cache:12YX1EBBv8cJ:wiki.svg.org/Inline_SVG+xhtml+svg+inline+headers&cd=1&hl=nl&ct=clnk&gl=be) – ChristopheD

Đảm bảo máy chủ web phân phối nó dưới dạng 'application/xhtml + xml'. – ChristopheD

Loại tài liệu của bạn là gì? Đảm bảo nó giống với ví dụ, ví dụ: XHTML, không phải HTML 4.01 CHUYỂN TIẾP.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nguồn

2010-03-11 22:08:30

Đây là ví dụ về building inline SVGs dynamically with JavaScript.

Nguồn

2011-06-12 15:22:52