Chargement d'un fichier SVG avec svg.js

J'ai une page HTML5 avec un élément SVG. Je voudrais charger un fichier SVG, en extraire certains éléments et les disposer un par un avec un script.

J'ai utilisé jQuery pour charger le fichier SVG avec succès, en utilisant .load() , après avoir inséré l'arbre SVG à l'intérieur du DOM. Mais je voudrais essayer svg.js de manipuler les éléments, mais dans la documentation, je ne peux pas trouver un moyen d'initialiser la bibliothèque à l'aide d'un élément SVG existant, où je vais obtenir les objets.

L'idée est d'accéder à l'élément SVG chargé (ou de le charger directement avec la bibliothèque svg.js), copier les objets individuels sur un autre élément et les déplacer là où j'ai besoin. Comment faire cela?

Vous devriez jeter un oeil sur le plugin svg.import.js

La documentation indique …

Tous les éléments importés avec un identifiant seront stockés. L'objet avec tous les éléments stockés est renvoyé par la méthode d'importation:

 var rawSvg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg [...]>"'; var draw = SVG('paper'); var store = draw.svg(rawSvg); store.polygon1238.fill('#f06');

Si vous connaissez l'identité des éléments, vous pouvez utiliser la méthode SVG.get après l'importation de svg brut:

 SVG.get('element_id').move(200,200)

La bibliothèque a été déplacée vers GitHub et la documentation mentionnée est à http://svgjs.com/referencing/

Ancien lien: http://documentup.com/wout/svg.js#referencing-elements

Étant donné un fichier SVG 'image.svg' contenant

 <svg viewBox="0 0 500 600" version="1.1"> <rect x="100" y="100" width="400" height="200" fill="yellow" stroke="black" stroke-width="3"/> </svg>

Et un fichier 'index.html' contenant

 <html> <head> <script type="text/javascript" src="svg.js"></script> <script type="text/javascript" src="jquery-XXXjs"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="svgimage"></div> </body> </html>

Alors si le fichier 'script.js' contient

 $(document).ready(function() { var image = SVG('svgimage'); $.get('image.svg', function(contents) { var $tmp = $('svg', contents); image.svg($tmp.html()); }, 'xml'); $('#svgimage').hover( function() { image.select('rect').fill('blue'); }, function() { image.select('rect').fill('yellow'); } ); });

Alors l'image SVG affichera et déplacera le pointeur de la souris dans et hors de la fenêtre du navigateur changera la couleur du rectangle du jaune au bleu.

Vous devriez maintenant pouvoir remplacer un fichier image SVG et définir n'importe quel nombre de fonctions pour manipuler l'image à l'aide de la bibliothèque SVG.js. La chose importante à réaliser est que les appels aux méthodes SVG.js ne réussiront pas si elles se déroulent avant que la fonction $ (document) .ready ne soit revenue.

Pour les points bonus, j'ai également trouvé la copie des valeurs des attributs 'viewBox', 'width' et 'height' en ajoutant les lignes suivantes après la déclaration de '$ tmp' pour fonctionner mieux pour afficher avec succès les contenus de fichiers SVG arbitraires:

  image.attr('viewBox', $tmp.attr('viewBox')); image.attr('width', $tmp.attr('width')); image.attr('height', $tmp.attr('height'));