Per Javascript etwas in SVG eingefügt - Wird nicht dargestellt.
1 0 1 
molily
Per Javascript etwas in SVG eingefügt - Wird nicht dargestellt.
Hallo,
ich habe mit bescheidenen Kentnissen ein <line>-Tag per Javascript in in ein <svg>-Tag eingefügt.
var musterSvgObj = {
name : "rect",
attributes : {x1:"0",y1:"200", x2:"700", y2:"200", stroke: "black", "stroke-width" : "20px"},
content : "Test"
}
Obiges Objekt habe ich per document.createElement(o.name) erzeugt und als Child über appendChild() in ein svg-Tag eingefügt, dann die Attribute per setAttribute gesetzt.
Im Firebug sieht das auch wunderbar aus:
<svg id="leinwand" width="700px" height="300px" viewBox="0 0 700 300">
<line x1="0" y1="200" x2="700" y2="200" stroke="black" stroke-width="20px"/>
</svg>
Im eigentlichen Seitenquelltext fehlt line aber komplett. Wie es scheint, wird das Element also nicht gerendert nach dem Einfügen. Wie packe ich das Problem an, um die Linie (nachträglich) zu zeichnen?
Vielen Dank!
-
Hi,
ich habe mit bescheidenen Kentnissen ein <line>-Tag per Javascript in in ein <svg>-Tag eingefügt.
Obiges Objekt habe ich per document.createElement(o.name) erzeugt
Dazu solltest du createElementNS benutzen.
Im eigentlichen Seitenquelltext fehlt line aber komplett.
Du meinst in dem, was du über “Quelltext anzeigen” o.ä. angezeigt bekommst? Das ist immer nur der HTML-Code, den der Browser ursprünglich vom Server empfangen hat – client-seitige Änderungen am DOM spiegeln sich darin nicht wider.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Dazu solltest du createElementNS benutzen.
Vielen Dank! Ja, so funktioniert es.
Kannst Du vielleicht noch erklären, wozu die eine Methode dient und wozu die andere?
-
Hallo,
Kannst Du vielleicht noch erklären, wozu die eine Methode dient und wozu die andere?
HTML und SVG sind unterschiedliche Markup-Sprache und ihre Elemente/Attribute gehören verschiedenen Namensräumen an. Beispiel: Das Element p existiert im HTML-Namensraum, aber nicht im SVG-Namensraum. Das Element circle existiert in SVG, aber nicht in HTML. Das Element title existiert in beiden Namensräumen (mit unterschiedlicher Bedeutung).
Nur durch eine Sonderregel im HTML5-Parser kann man in HTML direkt <svg> usw. schreiben und es wird als SVG erkannt.
createElement erstellt ein Element im HTML-Namensraum.
createElementNS erstellt ein Element im von dir angegebenen Namensraum. Das kann z.B. der von SVG sein (bezeichnet durch http://www.w3.org/2000/svg).Mathias
-
-