Comment ajouter dynamiquement un élément à HTML5 SVG?

J'ai lu quelques questions semblables à ceci, mais je ne peux pas obtenir mon code fonctionnant correctement. Je veux ajouter un élément SVG quand l'utilisateur clique sur la zone SVG.Comment ajouter dynamiquement un élément à HTML5 SVG?

Voici mon HTML5 avec SVG, il rend correctement:

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="jquery-1.6.2.min.js"></script> 
    <script src="svgdraw.js"></script> 
    </head> 
    <body> 
    <svg id="canvas" width="500" height="500"> 
    <circle cx="80" cy="80" r="50" fill="blue"/> 
    </svg> 
    </body> 
</html>

Voici le code JavaScript est exécuté sur un événement click:

var svgDocument = document.getElementById('canvas'); 
    var svgns = "http://www.w3.org/2000/svg"; 
    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"); 
    document.getElementById('canvas').appendChild(shape);

Dans Google Chrome je reçois un message d'erreur createElementNS n'existe pas. Mais je ne peux pas le faire fonctionner si je supprime tous les NS et null soit. Quelle est la bonne façon de faire cela? Est-ce différent pour différents navigateurs?

Source

2011-07-14 Jonas

Quand j'ai essayé de reproduire votre problème j'ai rencontré que * SVGDocument * était non définie. Une idée de ce qui se passe? –

Je pensais que html5 ne nécessitait plus d'espace de noms?! – yota

Pour autant que je sais createElementNS() fait partie du document -variable, essayez:

var shape = document.createElementNS(svgns,"circle");

Source

2011-07-14 18:58:47 KilZone

qu'est-ce que svgns? – user2846569

createElementNS est une fonction qui nécessite deux valeurs, l'espace de nom et un nom d'objet. Le premier est formaté comme une URL, ce dernier peut être n'importe quoi. @Jonas a la valeur de type d'URL stockée dans svgns (espace de noms SVG), voir la question, donc je réutilise juste cette variable. – KilZone

Comment ajouter dynamiquement un élément à HTML5 SVG?

Répondre

Questions connexes