javascript - ¿Cómo entiendo las propiedades de transformación en snap.svg?

Question

He estado intentando aprender snap.svg y tengo algunas dudas con respecto a las propiedades de transformación. Mi pregunta es bastante estúpida, pero aquí está

En el siguiente código de ejemplo, ¿qué significan los números?

 {"transform" : "t-10 0 s0 32 32"}
{"transform" : "r180 32 32"}

Supongo que s significa escala, ¿cuál es la diferencia entre animAfter y after? Soy muy nuevo en SVGs.

Answer 1

El formato de transformación es una cadena que es una secuencia de transformaciones, por lo que puede tener varias después de cada una.

Editar: Snap no hace una distinción entre mayúsculas / minúsculas en estos días, por lo que esta parte no hace la diferencia (aunque tal vez valga la pena ser consciente de ello, en caso de que veas algún código de Raphael.js y quieras entenderlo), el resto aún debería ser relevante ...

T / t = Traducir (t es relativo, T es absoluto) R / r = rotar (r es relativo, R es absoluto) S / s = escala (s es relativo, S es absoluto)

Vale la pena mirar la documentación de transformación de Raphael si Snap.svg no tiene suficiente información, ya que hay mucha superposición.

Para las transformaciones, algunos harán referencia a un "centro de origen" sobre el cual rotar / escalar, etc., ya que a veces puede querer que el centro de origen sea el objeto mismo, a veces 0,0, a veces alrededor de un punto específico.

t-10 0 s0 32 32 traduciría x, y -10,0 y luego escalar x, y, cx, cy así que escala 0 en la x, 32 en el camino alrededor de cx 32.

r180 32 32 giraría 180 grados alrededor del punto 32,32. Normalmente puede usar una coma o espacio para separar los valores.

after representa los valores de "atributo" para establecer después de que termina la animación. animafter representa valores de "animación" para establecer después de que termina la animación.

Answer 2

Snap parece usar la misma sintaxis que Rafael . t es traducir para que traduzca -10 unidades en x. s es escala yr es rotar.