Come faccio a scalare con la massima facilità un object, diciamo 2 volte la sua dimensione attuale e poi girarlo verticalmente e orizzontalmente, o entrambi?
A partire da ora, posso impostare “scala (2,2)” affinché diventi 2 volte più grande della sua larghezza e altezza, ma non riesco a capovolgerlo allo stesso modo con la scala (-1, 1) per il capovolgimento verticale .
Sto creando oggetti SVG a livello di codice, come formato da esportare.
Per applicare sia la scala che il flip, elenca solo entrambi nella tua trasformazione.
transform="scale(2,2) scale(-1,1)" o semplicemente combinare i valori
transform="scale(-2,2)"
Naturalmente, il problema che si ha con le scale negative è che gli oggetti vengono capovolti attraverso l’origine (in alto a sinistra) dell’SVG, in modo che possano uscire dal bordo del documento. È necessario correggere questo aggiungendo un traduttore pure.
Quindi, per esempio, immaginiamo di avere un documento che è 100×100.
Per capovolgerlo verticalmente facciamo:
e per correggere il movimento fuori dallo schermo lo spostiamo in negativo prima del flip (quindi viene ribaltato sullo schermo):
(Il traduttore è elencato qui secondo perché le liste di trasformazione vengono effettivamente applicate da destra a sinistra)
oppure possiamo spostarlo in positivo (in base alla dimensione ridimensionata) in seguito:
Ecco una demo che mostra flip verticale, flip orizzontale ed entrambi i flip
Aggiornare
Per capovolgere (in posizione) un object già esistente che si trova da qualche parte sullo schermo. Per prima cosa determina il riquadro di delimitazione (minX, minY, maxX, maxY) o centreX, centreY se lo sai già.
Quindi anteporre la seguente alla sua trasformazione:
translate(,0) scale(-1, 1) // for flip X translate(0,) scale(1, -1) // for flip Y
o se hai il centro che puoi usare
translate(<2 * centreX>,0) scale(-1, 1) // for flip X
Quindi nel tuo esempio:
Il minX + maxX arriva a 200. Quindi per capovolgere orizzontalmente, anteponiamo:
translate(200,0) scale(-1, 1)
Quindi l’object finale diventa:
Demo qui