Ridimensiona e rispecchia l’object SVG

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