Wie kann ich SVG und HTML in eine Seite mischen?

Ich habe die jQuery.svg plugin verwendet, um einige SVG-Rendering zu tun und es funktioniert perfekt, aber ich möchte auch den Server einige SVG in die Seite rendern und ich kann nicht bekommen, dass das funktioniert. Wie füge ich etwas SVG wie unten in die Seite ein, damit Firefox es rendert?Wie kann ich SVG und HTML in eine Seite mischen?

<!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>

Benötige ich ein Meta-Tag, das besagt, dass es SVG-Inhalt auf der Seite gibt oder den SVG-Namespace irgendwie definiert?

Quelle

2010-03-11 John Duff

Siehe this link (SVG in HTML-Einführung @ Mozilla Developer Center).

Ein Inline-SVG-Beispiel can be seen here.

Quelle

2010-03-11 21:40:09 ChristopheD

Ich schaue mir diese Links an und fügte die fehlenden xmlns hinzu, die immer noch nicht funktionieren. Ich habe die Frage mit einer vollständigen HTML-Seite aktualisiert, die nicht funktioniert. Was fehlt mir? –

Welche Header verwendet Ihr Webserver? Siehe diese Seite (leider nur im Google Cache: 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

Stellen Sie sicher, dass der Webserver dies als 'application/xhtml + xml' ausführt. – ChristopheD

Was ist Ihr Doctype? Stellen Sie sicher, dass es dasselbe wie das Beispiel ist, d. H. XHTML, nicht HTML 4.01 TRANSITIONAL.

<?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">

Quelle

2010-03-11 22:08:30

Hier ist ein Beispiel für building inline SVGs dynamically with JavaScript.

Quelle

2011-06-12 15:22:52

Wie kann ich SVG und HTML in eine Seite mischen?

Antwort

Verwandte Themen