Salve.
Ho iniziato ha leggere la guida su questo sito di SVG.
Ho provato a copiare questo codice:
<svg width="400" height="300" viewBox="0 0 400 300">
<script type="text/ecmascript"><![CDATA[

var elemento;
var scrittaCx;
var intervallo=10;

function startAnimazione(evt){
elemento=evt.target.ownerDocument.getElementById(" cerchio");
scrittaCx=evt.target.ownerDocument.getElementById( "valoreCx");
anima();
} function anima(){
var posizionex=parseFloat(elemento.getAttribute("cx")) ;
posizionex++;
if (posizionex<351) {
elemento.setAttribute("cx",posizionex);
scrittaCx.firstChild.nodeValue=posizionex;
setTimeout("anima()",intervallo);
}
}

function resetAnimazione(evt){
elemento=evt.target.ownerDocument.getElementById(" cerchio");
scrittaCx=evt.target.ownerDocument.getElementById( "valoreCx");
elemento.setAttribute("cx",50);
scrittaCx.firstChild.nodeValue=50;
}
]]></script> <line x1="50" y1="50" x2="350" y2="50" fill="none" stroke="black" stroke-width="2"/>
<circle id="cerchio" cx="50" cy="50" r="10" fill="red" stroke="black" stroke-width="2" />
<text x="200" y="130" fill="black" font-family="arial" font-size="24" text-anchor="middle">
Cx:
<tspan id="valoreCx" dx="10" fill="red">50</tspan>
</text>
<g onclick="startAnimazione(evt)">
<rect x="100" y="150" width="200" height="50" rx="5" fill="yellow" stroke="black" stroke-width="2"/>
<text x="200" y="180" fill="black" font-family="arial" font-size="24" text-anchor="middle" >Start</text>
</g>
<g onclick="resetAnimazione(evt)">
<rect x="100" y="220" width="200" height="50" rx="5" fill="green" stroke="black" stroke-width="2"/>
<text x="200" y="250" fill="black" font-family="arial" font-size="24" text-anchor="middle" >Reset</text>
</g>
</svg>
E dovrebbe costruire un'immagine dinamica, solo che nel mio browser firefox mi fa vedere:
<svg width="400" height="300" viewBox="0 0 400 300">
−
<script type="text/ecmascript">


var elemento;
var scrittaCx;
var intervallo=10;

function startAnimazione(evt){
elemento=evt.target.ownerDocument.getElementById(" cerchio");
scrittaCx=evt.target.ownerDocument.getElementById( "valoreCx");
anima();
} function anima(){
var posizionex=parseFloat(elemento.getAttribute("cx")) ;
posizionex++;
if (posizionex<351) {
elemento.setAttribute("cx",posizionex);
scrittaCx.firstChild.nodeValue=posizionex;
setTimeout("anima()",intervallo);
}
}

function resetAnimazione(evt){
elemento=evt.target.ownerDocument.getElementById(" cerchio");
scrittaCx=evt.target.ownerDocument.getElementById( "valoreCx");
elemento.setAttribute("cx",50);
scrittaCx.firstChild.nodeValue=50;
}

</script>
<line x1="50" y1="50" x2="350" y2="50" fill="none" stroke="black" stroke-width="2"/>
<circle id="cerchio" cx="50" cy="50" r="10" fill="red" stroke="black" stroke-width="2"/>
−
<text x="200" y="130" fill="black" font-family="arial" font-size="24" text-anchor="middle">

Cx:

<tspan id="valoreCx" dx="10" fill="red">50</tspan>
</text>
−
<g onclick="startAnimazione(evt)">
<rect x="100" y="150" width="200" height="50" rx="5" fill="yellow" stroke="black" stroke-width="2"/>
<text x="200" y="180" fill="black" font-family="arial" font-size="24" text-anchor="middle">Start</text>
</g>
−
<g onclick="resetAnimazione(evt)">
<rect x="100" y="220" width="200" height="50" rx="5" fill="green" stroke="black" stroke-width="2"/>
<text x="200" y="250" fill="black" font-family="arial" font-size="24" text-anchor="middle">Reset</text>
</g>
</svg>
Vorrei capire se devo metere un pluggin nel browser oppure compilare il codice SVG o ancora mettere delle libererie di riferimento.
Grazie.