/SVG&JS nur Opera will neu erstellte Elemente auch anzeigen
Deus Figendi
- browser
Mahlzeit!
Also Folgendes, ich habe ein SVG-Datei gezeichnet (mit Inkscape) und darin JavaScript eingebettet, welches das ein oder andere in dem Dokument verändert. Hat auch soweit ganz gut geklappt, aber man will ja mehr :)
Was ich jetzt wollte ist eine JS-Datei, die ich einfach in mein SVG linke und die sich ihre GUI etc. selber erschafft. Einen grundsätzlichen Plan wie das klappen sollte habe ich bereits.
Damit habe ich dann angefangen, habe ein SVG erstellt und ein JavaScript, welches zwei Elemente generiert und ins DOM hängt.
Das hat nicht funktioniert... ich habe daraufhin den Code auf das Nötigste um das Problem zu zeigen zusammen gekürzt und es bleibt auch bestehen (juhu ^^)
Also hier mal Code und Link:
SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="210mm"
height="297mm"
id="svg3018">
<defs
id="defs3020" />
<metadata
id="metadata3023">
</metadata>
<g
id="layer1">
<rect
width="200"
height="200"
x="100"
y="100"
id="hardcoded"
style="fill:#000080;fill-opacity:1;stroke:none"
onclick="init();" />
</g>
<script type="text/ecmascript" xlink:href="./texureme.js" />
</svg>
JavaScript:
function init() {
var tm_layer = document.createElement("g");
tm_layer.setAttributeNS(null,"id","layer2");
var tm_test = document.createElement("rect");
tm_test.setAttributeNS(null,"width","100");
tm_test.setAttributeNS(null,"height","100");
tm_test.setAttributeNS(null,"x","100");
tm_test.setAttributeNS(null,"y","100");
tm_test.setAttributeNS(null,"id","scripted");
tm_test.setAttributeNS(null,"style","fill:#FF00FF;fill-opacity:1;stroke:none");
tm_layer.appendChild(tm_test);
document.getElementsByTagName("svg")[0].appendChild(tm_layer);
}
Zuerst hatte ich das ohne Funktion da stehen, aber ich dachte okay, vielleicht ist das svg-Element noch nicht geladen also mache ich das mal onClick.
Also was passieren soll ist, dass wenn man auf das Quadrat klickt, dass dann ein weiteres Quadrat erscheint.
Die eigentliche Problembeschreibung ist simpel:
Opera macht es FireFox3.6 und Iron5 machen es nicht (Fx4 hab ich noch gar nicht probiert und kann ich auch nicht probieren solange ich das hier schreibe).
Das Verhalten:
Im Firefox sagt die Fehlerkonsole: nichts, keine Fehler.
Im Firefox erscheinen die neuen Elemente im DOM des FireBug, sind aber nicht zu sehen.
Im Iron sagt die Fehlerkonsole: Resource interpreted as document but transferred with MIME type image/svg+xml.
Naja von mir aus.
Im Iron erscheinen die neuen Elemente weder sichtbar noch in den "Entwicklertools".
Lokal zeigt sich das gleiche Verhalten.
Warum ist das so und wie kann ich es fixen?
Nachtrag: Firefox4 (allerdings ohne Firebug) verhält sich wie Firefox3, keine Meldung in der Fehlerkonsole und kein Effekt im sichbaren Bereich.
Nochmal weiter gesucht und im self fündig geworden, mir ging's da wie dem Menschen damals ^^
Alter Thread ähnliches Problem
Lösung: createElementNS mit dem NameSpace http://www.w3.org/2000/svg (nicht null wie ich es versuchte) verwenden, dann geht's.