Centrer un SVG avec l'attribut preserveAspectRatio et svg.js

Question

Je travaille avec svg.js et j'essaie de mettre au milieu un svg. J'utilise l'attribut preserveAspectRatio, mais cela ne fonctionne pas.

J'ai défini la vue, mais le preserveAspectAttribute n'a pas fonctionné. Quand j'écris le preserveAspectAttribute disparaître le dernier svg aussi et je ne sais pas pourquoi. J'ai tout mis (css, svg.js, js et le html nécessaire) en jsFiddle.

J'espère que n'importe qui pourrait m'aider.

Answer 1

Si vous regardez la console (appuyez sur F12), vous verrez une erreur:

Uncaught TypeError: undefined is not a function 

également, l'onglet Net dans les outils de dev montre que store.svg n'est pas chargé.

Problème 1

Le principal problème avec votre code est cette ligne.

imageE.maskWith(circleE).move(-20).attr('preserveAspectRatio', 'xMidYMid meet') 

move() attend deux paramètres et donc cette erreur est à l'origine du code pour arrêter à ce moment-là. La section de magasin de votre code ne fonctionne pas.

Si vous modifiez la ligne:

imageE.maskWith(circleE).move(-20,0).attr('preserveAspectRatio', 'xMidYMid meet') 

tout fonctionne.

Problème 2

xMidYmid meet devrait être xMidYMid meet (M majuscule). Cependant cette erreur n'a aucun effet car la valeur par défaut est xMidYMid meet de toute façon.

Working example here