web-dev-qa-db-fra.com

Création dynamique d'éléments SVG avec JavaScript dans HTML

Je veux créer un rectangle dans une page HTML, puis écrire du texte sur ce rectangle. J'ai aussi besoin que ce texte soit un hyperlien. C'est ce que j'ai fait mais ça ne fonctionne pas:

    <!DOCTYPE html>
<html>
<body>

<script>

    var svg   = document.documentElement;
    var svgNS = svg.namespaceURI;

    var rect = document.createElementNS(svgNS,'rect');
    rect.setAttribute('x',5);
    rect.setAttribute('y',5);
    rect.setAttribute('width',500);
    rect.setAttribute('height',500);
    rect.setAttribute('fill','#95B3D7');
    svg.appendChild(rect);
    document.body.appendChild(svg);

    var h=document.createElement('a');
    var t=document.createTextNode('Hello World');
    h.appendChild(t);
    document.body.appendChild(h);


</script>

</body>
</html>

Pouvez-vous aider s'il vous plaît? Merci.

javascripthtmlsvg
54
user2746087

Changement

var svg   = document.documentElement;

à

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

afin de créer un élément SVG.

Pour que le lien soit un lien hypertexte, ajoutez simplement un attribut href:

h.setAttribute('href', 'http://www.google.com');

démonstration

89
Denys Séguret

Ajoutez ceci au HTML:

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

Essayez cette fonction et adaptez pour votre programme:

var svgNS = "http://www.w3.org/2000/svg";  

function createCircle()
{
    var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null,"id","mycircle");
    myCircle.setAttributeNS(null,"cx",100);
    myCircle.setAttributeNS(null,"cy",100);
    myCircle.setAttributeNS(null,"r",50);
    myCircle.setAttributeNS(null,"fill","black");
    myCircle.setAttributeNS(null,"stroke","none");

    document.getElementById("mySVG").appendChild(myCircle);
}
32
Alex Moanga

Pour faciliter l'édition de svg, vous pouvez utiliser une fonction intermédiaire:

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p, v[p]);
  return n
}

Maintenant vous pouvez écrire:

svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) );

Exemple (avec une fonction getNode améliorée permettant de définir une propriété camelcase avec un tiret, par exemple strokeWidth> stroke-width):

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);
  return n
}

var svg = getNode("svg");
document.body.appendChild(svg);

var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' });
svg.appendChild(r);

var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 });
svg.appendChild(r);
28
Joseph Merdrignac