Warum werden programmatisch eingefügt SVG <tspan> Elemente nicht gezeichnet, außer mit d3.js?

Sagen wir, ich möchte programmatisch eine zusätzliche <tspan> im <text> Element in der folgenden SVG einfügen:Warum werden programmatisch eingefügt SVG <tspan> Elemente nicht gezeichnet, außer mit d3.js?

<svg width="300" height="500"> 
    <text x="50" y="100"> 
     <tspan x="50">one</tspan> 
     <tspan x="50" dy="20">two</tspan> 
     <tspan x="50" dy="20">three</tspan> 
    </text> 
</svg>

Das mit getan werden kann, unter anderem reine JavaScript (.appendChild), jQuery (.append) und d3 .js (.append). Obwohl alle drei Methoden erfolgreich das Element einzufügen, kann ich nur scheinen, um es zu bekommen tatsächlich angezeigt werden, wenn sie von d3.js eingefügt wird:

Siehe reduziert Fall in dieser Geige: http://jsfiddle.net/2NLJY/.

Das Verhalten ist konsistent über die Browser, die ich getestet habe: Firefox, Chrome und Safari (alle OS X 10.8).

Was geht hier vor?

Quelle

2013-05-22 serhalp

Sie können createElement nicht zum Erstellen von SVG-Elementen verwenden. SVG-Elemente müssen in der SVG-Namensraum angelegt werden, so dass Sie

document.createElementNS("http://www.w3.org/2000/svg", "tspan");

Es gibt eine jquery plugin schreiben müssen, die Funktionalität zu jquery Elemente ermöglicht svg fügt erstellt werden.

Quelle

2013-05-22 21:05:12

Das macht Sinn. Die Behebung dieses Problems hat mich gerade zu dem eigentlichen Problem geführt, das ich hier untersuchen wollte: Warum werden "dy" -Attribute ignoriert (manchmal), wenn '' -Elemente programmgesteuert eingefügt werden? http://jsfiddle.net/2NLJY/1/ Das sieht in Safari nicht einmal genauso aus wie in Chrome und Firefox ... – serhalp

@serhalp, das ist eine andere Frage. Sie sollten die obige Antwort aufheben und/oder akzeptieren. – mccannf

Obwohl nützlich, beantwortet es nur teilweise meine Frage. Wenn das Element mit createElementNS wie angegeben erstellt wird, wird der '' nicht am erwarteten Ort angezeigt. – serhalp

Warum werden programmatisch eingefügt SVG <tspan> Elemente nicht gezeichnet, außer mit d3.js?

Antwort

Verwandte Themen