Ecco un esempio di immagine presa dalla rete Ecco un altro esempio di immagine presa dalla rete {100}{200}{3100}{4500} ?? Qui modifico cx !! ?? Qui modifico cy !! {1210} ?? Qui modifico r !! {800} ?$height$! {1900} ?$width$! {1400} ?$ry$! {300} {qa=6;qh=2520;[qa*350,qh+qa*75, qa*379,qh+qa*161, qa*469,qh+qa*161, qa*397,qh+qa*215, qa*423,qh+qa*301, qa*350,qh+qa*250, qa*277,qh+qa*301, qa*303,qh+qa*215, qa*231,qh+qa*161, qa*321,qh+qa*161]} ? Uso un vettore ! {[3150,475,2850,4200,150,2325, 250,3925,2250,1375]} ?$height$! {1100} ?$width$! {2900} Posso sottintendere gli attributi x ed y e rx e ry dell'elemento rect e cx e cy degli elementi circle ed ellipse. Se sottintesi, valgono zero per cui il posizionamento si fa con l'attributo transform che consente anche di ruotare la figura dell'ellisse. Viceversa DEBBO specificare gli attributi width, height dell'elemento rect e r dell'elemento circle e rx ed ry dell'elemento ellipse. Se non li indico l'elemento non viene visualizzato. Versione del 4 dicembre 2013. Per promemoria... Prima riga normale... seconda in grassetto... Altro ancora : √2 = sqrt(2) M 1600,2400 m {qq=qa;qp=0;qq},0 ?? Dopo le prime definizioni inizio a tracciare il pentagono !! l {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Secondo punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Terzo punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Quarto punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Quinto punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ??? Ho finito !!! M 1600,2400 m {qq=qa/2;qp=0;qq},0 ?? Dopo le prime definizioni inizio a tracciare il pentagono !! l {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Secondo punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Terzo punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Quarto punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ? Quinto punto ! {qp++;round(qq*(cos(2*PI*qp/5)-cos(2*PI*(qp-1)/5)))} {round(qq*(sin(2*PI*qp/5)-sin(2*PI*(qp-1)/5)))} ??? Ho finito !!!
Tutto questa parte di questo documento, oltre il disegno SVG, divienta invisibile quando si stampa.
In rete: http://www.elegio.it/svg/svg2013/disegnicalcolatisvg.html
Crea il disegno dei vari elementi grafici ossia il più importante ovvero il path ma anche gli elementi polyline o polygon e gli elementi più semplici ovvero rect, circle, ellipse e line, tutti raggruppati dentro un unico elemento contenitore ( per esempio g o symbol ) con Javascript.
( ovviamente solo se Javascript è stato abilitato a funzionare )

...Javascript non abilitato...

...Javascript non abilitato...

Questo documento serve per riutilizzare la funzione modificomolti(idmolti,ricopio) che fa queste trasformazioni e applica le descrizioni ( usando l'elemento desc ) del disegno del path o della polyline o del polygon o dei sempli elementi rect, circle, ellipse e line, tutti raggruppati dall'elemento che funge da raggruppatore indicato dall'attributo di identificazione idmolti.

Ho complicato leggermente ( oggi, 4 dicembre 2013 ) questa funzione già descritta a grosse linee in precedenti documenti per consentire l'uso non di un solo path ma di gruppi di path e l'uso di elementi di nome polyline, polygon, rect, circle, ellipse e line oltre che molti livelli di commenti in modo da permettere, in fase di debugging, la cancellazione di parti del disegno già corredate da commenti. Ora esiste il commento ??? che termina con !!! ed il commento ?? che termina con !! oltre che il commento base ossia ? che termina con !.

Tra questi commenti ce ne è anche uno speciale che serve per specificare quale attributo si vuole descrivere. Per gli elementi che richiedono vari attributi ho scelto un ordine standard di definizione ossia:

Ma è consentito non seguire questa sequenza predefinita nella scrittura delle marche <desc>. Se per esempio si vuole descrivere il solo raggio di un dato cerchio basta usare il commento speciale ?$r$! che ovviamente verrà eliminato all'atto della attivazione della funzione eval(...) di Javascript ma guiderà Javascript a modificare il solo attributo r e non cx o cy.

Eliminati tutti i commenti, il disegno di qualsiasi elemento viene infatti completato con la valutazione tramite la eval(...) delle varie sottostringhe delimitate da { e }  . Ovviamente gli elementi path, polygon e polyline accettano vettori di dati mentre gli altri elementi rischiedono un singolo dato numerico opportunamente calcolato ma possono avere bisogno non di un solo attributo come per esempio path ma anche due o tre o quattro...

Se ricopio non è un numero i disegni non sono ricopiati negli elementi a cui sarebbero destinati e se ricopio vale 1 o è la stringa "fammivedere" bisogna che esista una marca con identificativo "g_"+gpapolid in cui viene stampato il risultato dei calcoli della funzione modificopapol(gpapolid,ricopio).

Si possono dare altri argomenti facoltativi alla funzione modificomolti(idmolti,ricopio) in modo da pilotare esternamente la dimensione dei disegni. In questo esempio ho usato come terzo argomento il numero 1500 e disegno due pentagoni concentrici col più piccolo di lato dimezzato rispetto al più grande ed ho ovviamente messo alla prova la costruzione di rettangoli, gerchi, ellissi e linee... 

// Funzione Javascript per la generazione dinamica 
// del disegno di un gruppo di path e di polyline e di polygon 
// oltre che elementi rect, circle, ellipse e line 
// e per consentire l'inserimento di commenti ( che ovviamente vanno 
// eliminati quando il disegno viene trasferito all'attributo d dei 
// vari path o all'attributo points dei vari polyline e polygon ).
// Molti elementi accettano vari attributi di carattere numerico
// e si possono usare dunque anche parecchie marche desc e viene
// consentito anche un ordine arbitrario nella descrizione matematica
// dei valori degli attributi multipli. Per esempio circle
// ammette tre attributi, ossia cx,cy ed r ovvero l'ascissa, l'ordinata
// del centro del cerchio ed il suo raggio.
// Per indicare quale attributo viene descritto basta scrivere un
// commento speciale usando il carattere $ ossia per esempio basta
// scrivere ?$cx$! quando si vuole descrivere l'attributo cx 
// oppure ?$r$! quando si vuole descrivere l'attributo r ovvero 
// il raggio del circle.
//
function modificomolti(idmolti,ricopio){
    //
    // Elimina i commenti e valuta le stringhe ripulite 
    // dai commenti. Per applicare i risultati delle valutazioni,
    // ricopio deve essere un numero.
    //
    // Utilizza gli argomenti facoltativi come parametri usabili 
    // nel creare i disegni dei path o polyline o polygon o altri elementi 
    // ed il primo argomento facoltativo, se non numero, attiva 
    // gli "alert" di debug.
    //
    var elobj,obj,listapapol=[0,0,0,0,0,0,0],lista,figlio,
        j,ja,jj,jel,nn,mm,mf,zz,zf,
        vzf=[ [[]],[[]],[[]],[[]],[[]],[[]],[[]] ];
    //
    // Parametri vari definibili dinamicamente...
    // I primi sei qa,qb...qf, sono inizializzabili tramite gli 
    // argomenti facoltativi.
    //
    var qa=0,qb=0,qc=0,qd=0,qe=0,qf=0,qg=0,qh=0,qi=0,qj=0;
    var qk=0,ql=0,qm=0,qn=0,qo=0,qp=0,qq=0,qr=0,qs=0,qt=0;
    var qu=0,qv=0,qw=0,qx=0,qy=0,qz=0;
    var qxa=0,qxb=0,qxc=0,qxd=0,qxe=0,qxf=0,qxg=0,qxh=0,qxi=0,qxj=0;
    var qxk=0,qxl=0,qxm=0,qxn=0,qxo=0,qxp=0,qxq=0,qxr=0,qxs=0,qxt=0;
    var qxu=0,qxv=0,qxw=0,qxx=0,qxy=0,qxz=0;
    var qya=0,qyb=0,qyc=0,qyd=0,qye=0,qyf=0,qyg=0,qyh=0,qyi=0,qyj=0;
    var qyk=0,qyl=0,qym=0,qyn=0,qyo=0,qyp=0,qyq=0,qyr=0,qys=0,qyt=0;
    var qyu=0,qyv=0,qyw=0,qyx=0,qyy=0,qyz=0;
    var qza=0,qzb=0,qzc=0,qzd=0,qze=0,qzf=0,qzg=0,qzh=0,qzi=0,qzj=0;
    var qzk=0,qzl=0,qzm=0,qzn=0,qzo=0,qzp=0,qzq=0,qzr=0,qzs=0,qzt=0;
    var qzu=0,qzv=0,qzw=0,qzx=0,qzy=0,qzz=0;
    //
    //  Attivazione del debug e vari tipi di commenti da eliminare 
    //  eventualmente...
    //
    var inikommento,endkommento,dimkommento;
    var ka,satel,xdebug=false,debugk=[["???","!!!"],["??","!!"],["?","!"]];
    var nomielementi=[["path","d"],
           ["polyline","points"],
           ["polygon","points"],
           ["rect","x","y","width","height"],
           ["circle","cx","cy","r"],
           ["ellipse","cx","cy","rx","ry"],
           ["line","x1","y1","x2","y2"]];
    //
    if(arguments.length>2){
       //
       // Se il primo argomento facoltativo risulta 
       // non essere un numero ma un vettore di almeno due
       // elementi,fa anche stampe di debug.
       // Se è un vettore prende il primo elemento.
       //
       xdebug=isNaN(arguments[2]);
       if(xdebug)qa=arguments[2][0];
       else if(arguments[2].length>0)qa=arguments[2][0];
       else qa=arguments[2];
       if(arguments.length>3)qb=arguments[3];
       if(arguments.length>4)qc=arguments[4];
       if(arguments.length>5)qd=arguments[5];
       if(arguments.length>6)qe=arguments[6];
       if(arguments.length>6)qf=arguments[7];
    }
    elobj=document.getElementById(idmolti);
    for(jel=0;nomielementi.length>jel;jel++){
       listapapol[jel]=elobj.getElementsByTagName(nomielementi[jel][0]);
       lista=[];
       for(jj=0;listapapol[jel].length>jj;jj++){
          obj=listapapol[jel][jj];
          vzf[jel][vzf[jel].length]=[];
          figlio=obj.firstChild;
          lista=obj.childNodes;
          ka=0;
          for(ja=0;lista.length>ja;ja++)if(lista[ja].nodeName=="desc"){
             ka++;
             if(ka>=nomielementi[jel].length)break;
             figlio=lista[ja];
             zz=figlio.textContent;
             satel=nomielementi[jel][ka];
             mm=zz.indexOf("?$");
             if(mm>=0){
                mf=zz.indexOf("$!");
                if(mf>mm+2){
                    satel=zz.slice(mm+2,mf);
                    }
                }
             //
             // Cancella tutti i tipi di commenti  
             // 
             for(j=0;debugk.length>j;j++){
                inikommento=debugk[j][0];
                endkommento=debugk[j][1];
                dimkommento=endkommento.length;        
                mm=zz.indexOf(inikommento);
                if(mm>=0){
                   zf="";
                   nn=0;
                   while(mm>=0){
                      mf=zz.indexOf(endkommento,mm);
                      if(mf>=0){zf+=zz.slice(nn,mm);
                         nn=mf+dimkommento;
                         mm=zz.indexOf(inikommento,nn);}
                      else mm=-1;
                      };
                   zf+=zz.substr(nn);
                   zz=zf;}
                }
             //
             // Fa la valutazione della stringa depurata 
             // dai commenti e con le parti eseguibili 
             // delimitate da parentesi graffe.
             //
             nn=0;
             zf="";
             mm=zz.indexOf("{");
             if(mm>=0){
                while(mm>=0){
                   mf=zz.indexOf("}",mm);
                   if(mf>=0){zf+=zz.slice(nn,mm);
                       with(Math){zf+=" "+eval(zz.slice(mm+1,mf))};
                       nn=mf+1;
                       mm=zz.indexOf("{",nn);}
                   else mm=-1;
                   };
                zf+=zz.substr(nn);
                vzf[jel][jj][vzf[jel][jj].length]="("+satel+") "+zf;
                // Se è abilitato modifica effettivamente 
                // l'elemento da modificare. 
                if(!isNaN(ricopio)){
                   if(isNaN(zf))obj.setAttribute(satel,zf);
                   else obj.setAttribute(satel,eval(zf));
                   }
                if(xdebug)alert(nomielementi[jel][0]+" "+satel+
                          " ( "+jj+" ) Ottiene: \n"+zf);
                } // fine attuazione modifiche
             } // fine for(ja)
          }    // fine for(jj)
       }       // fine for(jel)  
    //
    // Se ricopio vale 1 o vale "fammivedere" ricopia i risultati
    // in una marca di nome "g_"+idmolti. 
    //
    if(ricopio==1 || ricopio=="fammivedere" ){
       zz="Scrivo:";
       for(jel=0;nomielementi.length>jel;jel++){
          for(jj=0;listapapol[jel].length>jj;jj++){
             zz+="\u003cbr/\u003e"+nomielementi[jel][0]+" "+(jj+1)+
                " :  "+vzf[jel][jj]+" "; }
          }
       // Salva all'indirizzo dell'identificatore preceduto da "g_"
       obj=document.getElementById("g_"+idmolti);
       obj.innerHTML=zz; 
       }
    return vzf; 
    }

Per vedere come bisogna usare questa funzione guardare il sorgente dove è applicata ai vari tipi di elementi grafici

Promemoria collaterale...

Per scrivere la radice di due ossia   √2   bisogna scrivere   &#x221a;<span style="text-decoration:overline">2</span>   come, ad esempio, facendo una frazione :   √22  . ( Attenzione, se l'editor dannato non rispetta le regole CSS http://it.wikipedia.org/wiki/CSS dei fogli di stile ossia Cascading Style Sheets qui scompare la riga di divisione di √2/2 ma peggio per chi usa editor obsoleti ! )