Javascript Girl
  1. Javascript Girl
  3. SVG Transformations en JavaScript
Intereting Posts
Lier un événement de clic à une méthode dans une classe Que se passe-t-il lorsque vous avez deux appels jQuery $ (document) .ready dans deux fichiers JavaScript utilisés sur la même page HTML? Ne gardez-vous que les premiers n caractères dans une chaîne? Conversion de javascript en entier en rangée d'octets et retour Exécuter JS sur MongoDB lors de l'insertion de PHP Javascript pour remplacer une abréviation par son équivalent Comment appeler GWT java fonction à partir de Javascript? Barre flottante avec jQuery Pourquoi ai-je besoin d'un serveur HTTP pour exécuter Angular 2? Pour-chaque sur un tableau en JavaScript? La date de fin de chèque javascript est supérieure ou égale à la date de début Supprimez le texte avec les balises HTML en Javascript Le téléchargement de fichiers Safari xhr drag'n'drop semble se produire deux fois Passer des arguments dans des fonctions anonymes en JavaScript Avoir un élément cliquable dans un en-tête d'accordéon Bootstrap

SVG Transformations en JavaScript

Les transformations SVG peuvent être effectuées via JavaScript en configurant leurs attributs correspondants setAttribute("transform", "translate(x,y)") mais devrait également être possible via JavaScript pur . 

 elem.transform.baseVal.getItem(0).setTranslate(x, y); elem.transform.baseVal.getItem(0).setRotate(x, y);

Ces deux devraient fonctionner pour la traduction et la rotation, mais qu'en est-il de l'inclinaison, de la mise à l'échelle et de la matrice? elem.transform.baseVal.getItem(0).setMatrix() existe, mais autant que je peux le dire, cela exclut aucun params et SVGCreateMatrix() n'accepte aucun params non plus. Comment suis-je censé le faire, et comme question bonus: qu'est-ce que getItem(0) fait réellement?

Chaque élément <svg> a une méthode createSVGMatrix dom. 

 var matrix = svgElement.createSVGMatrix();

C'est la matrice d'identité.

Vous pouvez alors manipuler ceci … 

 matrix = matrix.translate(10, 10);

Ou directement … 

 matrix.a = 3;

Et ensuite l'utiliser 

 elem.transform.baseVal.getItem(0).setMatrix(matrix);

GetItem (0) obtient le premier élément dans un attribut de transformation, par exemple 

 transform="translate(1, 1) scale(2)"

getItem(0) obtient la matrice de translate(1, 1) et getItem(1) obtient la matrice de l' scale(2)

Si vous n'avez pas configuré une transformation sur un élément, alors getItem(0) lancera. Vous pouvez vérifier combien d'éléments utilisent numberOfItems et / ou ajouter un élément initial à l'aide de createSVGTransformFromMatrix pour transformer votre matrice en transformée et appendItem pour ajouter la transformation.