Я пытаюсь изучить snap.svg, и у меня есть некоторые сомнения относительно свойств преобразования. Мой вопрос довольно глупый, но вот он
В следующем примере кода, что означают числа?
{"transform" : "t-10 0 s0 32 32"}
{"transform" : "r180 32 32"}
Я предполагаю, что s означает масштаб, и какова разница между animAfter и after? Я очень новичок в SVG.
Формат преобразования - это строка, представляющая собой последовательность преобразований, поэтому вы можете иметь несколько следующих друг за другом.
Редактировать: Snap не делает различий между прописными и строчными буквами в наши дни, поэтому эта часть не имеет значения (хотя, возможно, стоит об этом знать, если вы видите какой-то код Raphael.js и хотите понять), отдых все еще должен быть актуальным, хотя...
T/t = Перевести (t является относительным, T является абсолютным) R/r = поворот (r относительно, R абсолютно) S/s = масштаб (s относительный, S абсолютный)
Стоит посмотреть документацию по преобразованию Рафаэля, если в Snap.svg недостаточно информации, поскольку существует много совпадений.
При преобразованиях некоторые ссылаются на "центр происхождения", относительно которого нужно вращать/масштабировать и т.д., Так как иногда вам может потребоваться, чтобы центром происхождения был сам объект, иногда 0,0, иногда вокруг определенной точки.
t-10 0 s0 32 32 будет переводить x, y -10, 0, а затем масштабировать x, y, cx, cy, так масштабировать 0 на x, 32 на пути вокруг cx 32.
r180 32 32 будет поворачиваться на 180 градусов вокруг точки 32,32. Обычно вы можете использовать запятую или пробел для разделения значений.
after представляет значения "атрибута" для установки после завершения анимации. animafter представляет "анимационные" значения, которые нужно установить после завершения анимации.
Snap, похоже, использует тот же синтаксис, что и raphael. t переводится так, что переводят -10 единиц в x. s - масштаб, а r вращается.