Créer des graphiques SVG en utilisant Javascript ?

Question

Comment puis-je créer des graphiques SVG en utilisant JavaScript ?

Tous les navigateurs supportent-ils SVG ?

Answer 1

Jetez un coup d'œil à cette liste sur Wikipedia sur les navigateurs qui supportent SVG. Il fournit également des liens vers plus de détails dans les notes de bas de page. Firefox, par exemple, prend en charge le SVG de base, mais ne dispose pas pour l'instant de la plupart des fonctions d'animation.

Un tutoriel sur la façon de créer des objets SVG à l'aide de Javascript est disponible. ici :

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");

Answer 2

Cette réponse date de 2009. Il s'agit maintenant d'un wiki communautaire, au cas où quelqu'un voudrait le mettre à jour.

IE a besoin d'un plugin pour afficher le SVG. Le plus courant est celui qui peut être téléchargé par Adobe ; cependant, Adobe ne le supporte plus et ne le développe plus. Firefox, Opera, Chrome, Safari, afficheront tous le SVG de base sans problème mais rencontreront des problèmes si des fonctions avancées sont utilisées, car le support est incomplet. Firefox ne prend pas en charge l'animation déclarative.

Les éléments SVG peuvent être créés avec javascript comme suit :

// "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 site Spécification SVG décrit les interfaces DOM pour tous les éléments SVG. Par exemple, l'élément SVGCircleElement, qui est créé ci-dessus, dispose de cx , cy et r pour le point central et le rayon, auxquels on peut accéder directement. Il s'agit des attributs SVGAnimatedLength, qui ont une valeur de baseVal pour la valeur normale, et une propriété animVal pour la valeur animée. Pour l'instant, les navigateurs ne supportent pas de manière fiable la propriété animVal propriété. baseVal est une longueur SVGL, dont la valeur est fixée par l'option value propriété.

Par conséquent, pour les animations script, on peut également définir ces propriétés DOM pour contrôler le SVG. Le code suivant devrait être équivalent au code ci-dessus :

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);

Answer 3

Pour le faire en mode cross-browser, je recommande fortement RaphaelJS . Il a une très bonne API et fait du VML dans IE, qui ne comprend pas le SVG.

Answer 4

Tous les navigateurs modernes, à l'exception d'IE, supportent le SVG

Voici un tutoriel qui fournit un guide étape par étape sur la façon de travailler avec SVG en utilisant javascript :

Scripting SVG avec JavaScript Partie 1 : Cercle simple

Comme Boldewyn a déjà dit que si vous voulez

Pour faire du cross-browser, je recommande vivement RaphaelJS : rapaheljs.com

Bien que pour l'instant, je trouve que la taille de la bibliothèque est trop grande. Il possède de nombreuses fonctionnalités intéressantes, dont certaines ne vous seront peut-être pas utiles.

Answer 5

J'aime jQuery SVG bibliothèque. Elle m'aide chaque fois que j'ai besoin de manipuler des SVG. Elle facilite vraiment le travail avec SVG à partir de JavaScript.