Création de graphiques SVG avec Javascript?
Comment créer des graphiques SVG avec Javascript?
Est-ce que tous les navigateurs supportent SVG?
Regardez cette liste sur Wikipedia pour quels navigateurs 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 la plupart des fonctionnalités d’animation manquent pour le moment.
Vous trouverez un tutoriel sur la création d'objets SVG à l'aide de Javascript here :
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");
Cette réponse date de 2009. Maintenant, un wiki de la communauté au cas où quelqu'un voudrait le mettre à jour.
IE a besoin d'un plugin pour afficher SVG. Le plus commun est celui disponible au téléchargement par Adobe; Cependant, Adobe ne le prend plus en charge ni ne le développe. Firefox, Opera, Chrome, Safari afficheront tous les fichiers SVG de base, mais présenteront des défauts si les fonctionnalités 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 spécification SVG décrit les interfaces DOM pour tous les éléments SVG. Par exemple, le SVGCircleElement, créé ci-dessus, a les attributs cx, cy et r pour le point central et le rayon, auxquels il est possible d'accéder directement. Ce sont les attributs SVGAnimatedLength, qui ont une propriété baseVal pour la valeur normale et une propriété animVal pour la valeur animée. Les navigateurs ne supportent pas de manière fiable la propriété animVal. baseVal est une longueur SVGL, dont la valeur est définie par la propriété value.
Par conséquent, pour les animations de script, vous pouvez également définir ces propriétés DOM pour contrôler 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);
Pour le faire sur plusieurs navigateurs, je recommande fortement RaphaelJS . Il possède une bonne API et gère le langage VML dans IE, qui ne comprend pas le format SVG.
Tous les navigateurs modernes sauf IE supporte SVG
Voici un tutoriel qui explique pas à pas comment utiliser SVG avec javascript:
Comme Boldewyn a déjà dit si vous voulez
Pour le faire sur plusieurs navigateurs, je recommande fortement RaphaelJS: rapaheljs.com
Bien que pour le moment, je pense que la taille de la bibliothèque est trop grande. Il comporte de nombreuses fonctionnalités dont certaines ne sont peut-être pas nécessaires.
J'aime jQuery SVG bibliothèque beaucoup. Cela m'aide chaque fois que j'ai besoin de manipuler du SVG. Cela facilite vraiment le travail avec SVG à partir de JavaScript.
Je n'ai trouvé aucune réponse conforme, donc pour créer un cercle et ajouter à svg, essayez ceci:
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>Il existe un plugin jQuery qui vous permet de manipuler SVG via Javascript:
http://plugins.jquery.com/project/svg
De son intro:
Pris en charge de manière native dans Firefox, Opera et Safari et via le visualiseur Adobe SVG ou le lecteur Renesis dans IE, SVG vous permet d'afficher des graphiques dans vos pages Web. Maintenant, vous pouvez facilement piloter le canevas SVG à partir de votre code JavaScript.
Il existe plusieurs bibliothèques sur les graphiques SVG utilisant Javascript comme: Snap, Raphael, D3. Ou vous pouvez directement interfacer le SVG avec du javascript simple.
Actuellement, toutes les dernières versions des navigateurs prennent en charge SVG v1.1. SVG v2.0 est en version de travail et trop tôt pour l’utiliser.
Cet article explique comment interagir avec SVG à l'aide de Javascript et contient des liens vers des liens pour la prise en charge de navigateurs. interface avec SVG
Vous pouvez utiliser d3.js. Il est facile à utiliser et puissant.
D3.js est une bibliothèque JavaScript permettant de manipuler des documents basés sur des données. D3 vous aide à donner vie aux données en utilisant HTML, SVG et CSS.
Non, tous les navigateurs ne supportent pas SVG. Je crois que IE a besoin d'un plugin pour les utiliser. Puisque svg est juste un document xml, JavaScript peut les créer. Je ne suis pas certain de le charger dans le navigateur. Je n'ai pas essayé cela .
Ce lien contient des informations sur javascript et svg:
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm
IE 9 prend désormais en charge le SVG 1.1 de base. Il était temps, bien que IE9 soit encore loin derrière Google Chrome et le support Firefox SVG.
Donc si vous voulez construire vos fichiers SVG pièce par pièce en JS, n'utilisez pas simplement createElement(), ils ne dessineront pas, utilisez plutôt ceci:
var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");