Creare grafica SVG usando Javascript?



Answers

Questa risposta è del 2009.

IE necessita di un plug-in per visualizzare SVG. Il più comune è quello disponibile per il download da Adobe; tuttavia, Adobe non lo supporta o lo sviluppa. Firefox, Opera, Chrome, Safari visualizzeranno tutti gli errori SVG di base, ma si imbatteranno in stranezze se vengono utilizzate funzionalità avanzate, in quanto il supporto è incompleto. Firefox non supporta l'animazione dichiarativa.

Gli elementi SVG possono essere creati con javascript come segue:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

Le specifiche SVG descrivono le interfacce DOM per tutti gli elementi SVG. Ad esempio, SVGCircleElement, creato sopra, ha attributi cx , cy e r per il punto centrale e il raggio, a cui è possibile accedere direttamente. Questi sono gli attributi SVGAnimatedLength, che hanno una proprietà baseVal per il valore normale e una proprietà animVal per il valore animato. I browser al momento non supportano in modo affidabile la proprietà animVal . baseVal è una lunghezza SVGL, il cui valore è impostato dalla proprietà value .

Quindi, per le animazioni di script, è possibile anche impostare queste proprietà DOM per controllare SVG. Il seguente codice dovrebbe essere equivalente al codice precedente:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);
Question

Come posso creare grafica SVG usando Javascript?

Tutti i browser supportano SVG?




Tutti i browser moderni tranne IE supportano SVG

Ecco un tutorial che fornisce una guida passo passo su come lavorare con SVG usando javascript:

Scripting SVG con JavaScript Parte 1: Simple Circle

Come Boldewyn ha già detto se vuoi

Per farlo cross-browser, consiglio vivamente RaphaelJS: rapaheljs.com

Anche se in questo momento sento che le dimensioni della biblioteca sono troppo grandi. Ha molte caratteristiche interessanti di cui potresti non aver bisogno.




Quindi se vuoi costruire il tuo materiale SVG pezzo dopo pezzo in JS, non usare solo createElement() , quelli che non disegnano, usa invece questo:

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");



C'è un plugin jQuery che ti permette di manipolare SVG tramite Javascript:

http://plugins.jquery.com/project/svg

Dalla sua introduzione:

Supportato in modo nativo in Firefox, Opera e Safari e tramite Adobe SVG viewer o Renesis player in IE, SVG consente di visualizzare la grafica all'interno delle pagine Web. Ora puoi facilmente guidare la tela SVG dal tuo codice JavaScript.




Non ho trovato risposta soddisfatta, quindi per creare cerchio e aggiungere a svg provare questo:

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);
<svg id="svg" width="100" height="100"></svg>




Ci sono librerie multiple su grafica SVG usando Javascript come: Snap, Raphael, D3. Oppure puoi interfacciare direttamente SVG con un semplice javascript.

Attualmente tutte le versioni più recenti dei browser supportano SVG v1.1. SVG v2.0 è in Working Draft e troppo presto per usarlo.

Questo articolo mostra come interagire con SVG utilizzando Javascript e fa riferimento ai collegamenti per il supporto del browser. Interfaccia con SVG




Links