web-dev-qa-db-fra.com

Création par programme d'un élément d'image SVG avec javascript

Comme mon titre l'indique, j'essaie de créer par programme un élément d'image SVG dans une page HTML en utilisant javascript. Pour une raison quelconque, mon code javascript de base ne fonctionne pas, mais si j'utilise la bibliothèque raphaeljs, cela fonctionne bien. Il y a donc évidemment un problème avec mon js - je n'arrive pas à comprendre ce que c'est.

(note: le navigateur cible est FF4 +)

Voici la page de base avec une version html de ce que j'essaie de réaliser en haut:

<html>
    <head>
        <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
    </head>
    <body>

       <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        id="test1"
        height="200px"
        width="200px">
            <image
            id="testimg1"
            xlink:href="http://i.imgur.com/LQIsf.jpg"
            width="100"
            height="100"
            x="0"
            y="0"/>
        </svg>

        <hr />

        <p id="testP1">


        </p>
        <hr />      
        <p id="testP2">


        </p>        
    </body>
</html>

Et voici mon javascript:

var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');

svg.appendChild(svgimg);

document.querySelector('#testP2').appendChild(svg);

Exemple en direct: http://jsfiddle.net/Yansky/UVFBj/5/

javascriptsvgraphael
31
Yansky

Attributs natifs SVG (non compris xlink:href) ne partage pas l'espace de noms SVG; vous pouvez soit utiliser simplement setAttribute au lieu de setAttributeNS, soit utiliser

svgimg.setAttributeNS(null,'x','0');

par exemple.

Ça y est, ça marche: http://jsfiddle.net/UVFBj/8/

Notez que j'ai changé votre violon pour utiliser correctement XHTML, afin que SVG fonctionne bien dans tous les principaux navigateurs.

39
Phrogz

Pour plus de référence.

J'ai utilisé la fonction ci-dessous pour créer des éléments SVG et il n'a pas réussi à créer des images à cause de xlink: href.

Le code ci-dessous est corrigé pour faire cela (créer n'importe quel élément svg à la volée)

function makeSVG(parent, tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs){
                if(k=="xlink:href"){
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
                }else{
                    el.setAttribute(k, attrs[k]);
                }
            }
        }

Exemple d'utilisation:

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

Le parent est utilisé pour organiser les 'couches' sur la balise svg groups.

7
Paulo Bueno