Comment puis-je comprendre les propriétés de transformation dans snap.svg?
J'ai essayé d'apprendre snap.svg et j'ai des doutes concernant les propriétés de transformation. Ma question est assez stupide mais la voici
Dans l'exemple de code suivant, que signifient les chiffres?
{"transform" : "t-10 0 s0 32 32"}
{"transform" : "r180 32 32"}
Je suppose que s signifie échelle, aussi quelle est la différence entre animAfter et after? Je suis très nouveau dans les SVG.
Le format de transformation est une chaîne qui est une séquence de transformations, vous pouvez donc en avoir plusieurs l'une après l'autre.
Edit: Snap ne fait pas de distinction entre les majuscules et les minuscules de nos jours, donc cette partie ne fait pas de différence (cela vaut peut-être la peine d'en être conscient, au cas où vous verriez du Raphaël .js et je veux comprendre), le reste devrait quand même être pertinent ...
T/t = Translation (t est relatif, T est absolu) R/r = tourne (r est relatif, R est absolu) S/s = échelle (s est relatif, S est absolu)
Cela vaut la peine de regarder Raphael transform documentation si le Snap.svg n'a pas assez d'informations, car il y a beaucoup de chevauchements.
Pour les transformations, certains référenceront un "centre d'origine" sur lequel tourner/mettre à l'échelle, etc., car parfois vous voudrez que le centre d'origine soit l'objet lui-même, parfois 0,0, parfois autour d'un point spécifique.
t-10 0 s0 32 32 traduirait x, y -10,0 puis redimensionnerait x, y, cx, cy donc redimensionnerait 0 sur le x, 32 pour contourner cx 32.
r180 32 32 tournerait de 180 degrés autour du point 32,32. Vous pouvez normalement utiliser une virgule ou un espace pour séparer les valeurs.
after représente les valeurs "d'attribut" à définir une fois l'animation terminée. animafter représente les valeurs "d'animation" à définir une fois l'animation terminée.
Snap semble utiliser la même syntaxe que raphael . t est la traduction donc c'est 10 unités traduites en x. s est l'échelle et r est la rotation.