Charger et transformer et incorporer un fichier SVG avec svg.js

Question

J'utilise la bibliothèque svg.js pour charger un fichier svg, ajouter ses points (images) et animer les points. Je charge le fichier svg en PHP et génère le code pour l'intégrer dans le HTML.

Voici comment mon code html ressemble:

<div class="svg-element"> 
    <svg id="svgId" ...> 
     <!-- SVG code --> 
    </svg> 
</div> 

Ce à quoi ressemble mon code javascript:

var svg = SVG.get('svgId'); 
svg.size('100%', '100%'); 

var point = svg.image(point_url); 
point.attr('id', 'pointId'); 
point.move(100, 100); 

Ce code fonctionne parfaitement, mais le problème vient quand j'utiliser la fonction scale() pour faire un effet de zoom avec les points.

point.scale(0.5); 

ou la fonction transform:

point.transform({scaleX : '0.5', scaleY : '0.5'}); 

Une erreur TypeError: SVG.parser is undefined est représenté sur la console javascript.

Comment puis-je éviter ce problème et utiliser la méthode de transformation avec les images? Le problème peut-être que j'utilise la fonction .get(), comment je peux créer l'objet SVG avec le fichier svg?

Answer 1

La solution est stupide et facile:

à la place

var svg = SVG('svgId'); 

d'utiliser la fonction .get().

Vous devez utiliser le constructeur SVG() avec l'id SVG, pas la fonction .get(), je suis confondu avec cela parce que this answer dit que vous pouvez utiliser .get() pour récupérer le SVG.