creazione dinamica testo SVG in js

[McLain]

Buongiorno a tutti.

Vorrei creare dinamicamente una tabella, semplicissima, in svg:
ovvero, vari rettangoli colorati, uno sotto l'altro, a mo de schifezza, nulla di particolare.

Ma volevo anche appunto, inserire del testo in ogniuno di queste "celle rettangolo"...
Io ho estrapolo dei dati da un'array o da un db, e li stampo sulla mia tabella, ma il tutto dovrebbe avvenire dinamicamente, con un ciclo che si ripete per la quantità di record raccolti.

Per la grafica delle righe, è semplice, ma l'inserimento del testo lo è già di meno.
Dovrei lavorare con DOM, tipo setAttribute("text","value") :master: ???

Qualcuno mi saprebbe indicare un esempio, oppure consigliare nuove idee?

Grazie

[fcaldera]

un esempio di svg + js
http://forum.html.it/forum/showthrea...&highlight=svg

niente ti vieta di creare una routine che calcoli il posizionamento e lunghezza degli spigoli ovviamente

[McLain]

Grazie.
Per la grafica non ho problemi... insomma, son fornito di un sacco di guide, ma la cosa mi è comunque chiara.

Ma non so fino a che punto possa javascript essere inserito in svg, nel senso, è possibile inserire un ciclo in qualsiasi punto del codice svg?
Ad esempio:

<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
id="elementoRadice"
onload="creaRettangoli()"
height="400" width="500">
<script type="text/ecmascript">
<![CDATA[
var svgdoc=document.getElementById("elementoRadice");
function creaRettangoli() {
for (var i=0; i<5; i++){
var newrect = document.createElement("rect");
var newtext = document.createElement("text");

newrect.setAttribute("x",10);
newrect.setAttribute("y",10+(50*i));
newrect.setAttribute("width",350);
newrect.setAttribute("height",40);
newrect.setAttribute("rx",15);
newrect.setAttribute("style","fill:red;stroke:blac k;stroke-width:2;");

newtext.setAttribute("x",10);
newtext.setAttribute("y",10+(50*i));
newtext.setAttribute("style","font-family:Arial; font-size:36; fill:yellow; stroke:black; stroke-width:4;");
newtext.setAttribute("text","ciao"); <<<<< cosa potrei inserire qui?

svgdoc.appendChild(newrect);
svgdoc.appendChild(newtext);
}
}
]]>
</script>
</svg>

I rettangoli me li crea, se elimino ciò che centra con i testi...

Boh, se avete idea di come risolvere la situazione...

Grazie