XSLT, SVG e DOM: trio fatale?

[max2m23]

Avrei bisogno di aggiungere elementi SVG in un file XSLT tramite DOM.
Però se per esempio uso il seguente codice:

<svg:svg id="elementoRadice" width="300" height="300">
 <script type="text/ecmascript"><![CDATA[
    var svgdoc=document.getElementById("elementoRadice");
    var newrect=document.createElement("rect");
    newrect.setAttribute("x",10);
    newrect.setAttribute("y",150);
    newrect.setAttribute("width",250);
    newrect.setAttribute("height",100);
    newrect.setAttribute("style","fill:blue;stroke:black;stroke-width:2;");
    svgdoc.appendChild(newrect);
   ]]></script>
   <svg:rect x="10" y="10" width="250" height="100" style="stroke:black;fill:red;stroke-width:2"/>
</svg:svg> 

riesco a visualizzare il rettangolo rosso, aggiunto "staticamente", ma non quello blu... come mai?

La cosa strana è che visualizzando il sorgente della pagina "renderizzata" ottengo:

<svg height="300" width="300" id="elementoRadice">
<script type="text/ecmascript">
         var svgdoc=document.getElementById("elementoRadice");
         var newrect=document.createElement("rect");
         newrect.setAttribute("x",10);
         newrect.setAttribute("y",150);
         newrect.setAttribute("width",250);
         newrect.setAttribute("height",100);
         newrect.setAttribute("style","fill:blue;stroke:black;stroke-width:2;");
         svgdoc.appendChild(newrect);
</script>
<rect style="fill: blue; stroke: black; stroke-width: 2;" height="100" width="250" y="150" x="10"></rect>
<rect style="stroke: black; fill: red; stroke-width: 2;" height="100" width="250" y="10" x="10"></rect>
</svg> 

cioè i tag relativi al rettangolo blu ci sono ma non vengono visualizzati... credo che si tratti di un problema del DOM, ma non so cosa fare...

spero che almeno stavolta mi possiate essere d'aiuto...

grazie e ciao,
2M23

[max2m23]

Dal DOM Inspector ho notato che il namespace dell'elemento creato col DOM non era settato, quindi ho scoperto che per aggiungere elementi di un namespace diverso dall'html bisogna usare il metodo document.createElementNS().

Quindi bisogna sostituire l'istruzione

var newrect=document.createElement("rect");

con

var svgns="http://www.w3.org/2000/svg";
var newrect=document.createElementNS(svgns, "rect");

e il gioco è fatto. non riesco ancora a spiegarmi però il problema col tag image segnalato in
questo thread, quindi chiunque possa dare una mano è ben accetto...

ciao,
2m23