Ordine delle trasformazioni SVG: scala e posizione

Con l'attributo SVG transform="translate(60 25) scale(2)", un punto sorgente viene scalato di un fattore due, poi spostato di 60 unità in orizzontale e 25 in verticale mentre viene mappato nel sistema di coordinate del padre. Inverti l'elenco in scale(2) translate(60 25) e anche la traslazione viene raddoppiata. La grafica ha le stesse dimensioni, ma una posizione diversa.

Quando un logo salta dopo il ridimensionamento, controlla l'elenco delle trasformazioni prima di modificarne i tracciati. Una disposizione utile è un gruppo esterno per la posizione e uno interno per la scala. I due compiti restano visibili e le coordinate originali della grafica restano disponibili per modifiche successive.

Segui un punto anziché indovinare l'ordine

Prendi il punto sorgente (10, 10). Con una scala di 2 e una traslazione di (60, 25), i due elenchi producono:

Entrambi i punti provengono dalla stessa coordinata sorgente. Il secondo elenco scala la traslazione oltre alla grafica. La sua posizione finale differisce di (60, 25) dalla prima.

Puoi incontrare descrizioni dell'ordine apparentemente contraddittorie. La specifica SVG descrive un elenco come sistemi di coordinate annidati nell'ordine scritto: la trasformazione più a sinistra diventa il gruppo esterno. Seguendo un punto sorgente verso l'esterno attraverso quei gruppi, l'operazione più interna agisce per prima. La definizione W3C dell'attributo transform mostra esplicitamente l'annidamento equivalente.

Per i calcoli sui punti, procedi dalla funzione più a destra verso sinistra. Per la struttura dei gruppi, leggi dall'esterno all'interno. Mantieni coerente l'interpretazione scelta durante il calcolo.

Confronta lo stesso simbolo a due parti

Salva questo esempio completo come transform-order.svg e aprilo in un browser. La grafica è un anello quadrato originale con un accento triangolare separato. L'apertura è spazio realmente vuoto definito dalla regola di riempimento even-odd.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Cambia soltanto l'attributo del gruppo in transform="scale(2) translate(60 25)". Il simbolo si sposta più a destra e più in basso, mentre le sue dimensioni e lo spazio tra le parti restano uguali.

Abbiamo renderizzato entrambi gli elenchi e un equivalente con gruppi annidati in un browser. I pannelli di confronto usano aree di coordinate identiche; il simbolo tenue mostra la geometria originale. Ogni punto rosso indica dove arriva il punto sorgente (10, 10).

Il riquadro locale della grafica originale è x=10, y=10, width=95, height=40. La prima disposizione produce limiti nelle coordinate della radice di x=80, y=45, width=190, height=80. L'elenco invertito produce x=140, y=70, con le stesse dimensioni di 190 × 80.

Queste misure descrivono questo semplice campione senza contorni. L'esempio non ha animazioni o trasformazioni CSS. Dimostra la composizione delle coordinate, non la qualità di conversione PerfectVector o la compatibilità con ogni editor SVG.

Separa posizione e dimensioni con gruppi annidati

Sostituisci il gruppo originale con questa struttura, mantenendo invariati i tracciati:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Questo corrisponde a translate(60 25) scale(2) su un singolo gruppo. La traslazione esterna posiziona il sistema di coordinate scalato. Cambiare la scala interna lascia i valori di traslazione esterni a (60, 25).

Questo non significa che ogni punto visibile resti fisso quando cambi la scala. Un punto lontano dall'origine locale si sposta comunque quando le sue coordinate vengono moltiplicate. Decidi quale punto sorgente deve ancorare la grafica prima di scegliere la traslazione.

Per esempio, supponi che l'angolo sorgente dell'anello (10, 10) debba arrivare a (120, 80) dopo una scala di 2. Calcola:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Usa translate(100 60) scale(2). L'angolo ora viene mappato su (120, 80). Traslare direttamente di (120, 80) posizionerebbe lì l'origine locale e lascerebbe l'angolo più a destra e più in basso.

Questo calcolo presuppone una scala uniforme senza rotazione o inclinazione. Per un perno di rotazione scelto deliberatamente, usa la guida a transform-origin SVG. Mantieni ogni trasformazione sul gruppo responsabile di quel compito, anziché combinare correzioni non correlate per tentativi.

Leggi la mappatura renderizzata quando il file è annidato

Un SVG importato può già avere trasformazioni su diversi antenati. Guardare soltanto l'attributo del gruppo più vicino non coglie il loro effetto combinato. La documentazione MDN di transform osserva anche che una trasformazione CSS ha la priorità quando proprietà CSS e attributo di presentazione riguardano lo stesso elemento. Controlla gli stili calcolati se cambiare l'attributo sembra non avere effetto.

Per un SVG inline renderizzato, questo frammento mappa il punto del gruppo scelto nelle coordinate utente dell'SVG radice:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

La matrice inversa della radice rimuove la mappatura condivisa della radice sullo schermo. Questo conta perché la visualizzazione di 700 × 400 dell'esempio è il doppio del suo viewBox di 350 × 200. Pixel dello schermo e coordinate SVG sono unità diverse qui. MDN documenta la mappatura restituita da getScreenCTM().

Il nostro confronto nel browser ha prodotto matrix(2 0 0 2 60 25) per il primo elenco e la versione annidata. L'elenco invertito ha prodotto matrix(2 0 0 2 120 50). In questo esempio di scala e traslazione, gli ultimi due numeri rendono esplicita la diversa traslazione.

Il frammento presuppone trasformazioni bidimensionali invertibili. Una scala zero non è adatta a questo controllo con matrice inversa. Per sovrapposizioni, esportazioni adattate, contorni o riquadri ruotati, usa il più dettagliato procedimento per i limiti SVG.

Non aspettarti che getBBox() sul gruppo della grafica riporti la posizione trasformata nella radice. Il suo risultato locale esclude la trasformazione dell'elemento stesso e quelle degli antenati, come spiega la documentazione di getBBox. Un riquadro locale può restare invariato mentre il simbolo si sposta visibilmente.

Correggi la trasformazione prima di ricostruire la grafica

Lavora su una copia dell'SVG. Identifica i tracciati che devono muoversi insieme, poi esamina il loro gruppo e i suoi antenati. Annota un punto di ancoraggio riconoscibile e la destinazione prevista per quel punto.

Cambia una trasformazione alla volta. Se le dimensioni sono corrette ma la posizione è sbagliata, confronta la traslazione prodotta dai due ordini. Se le parti si muovono indipendentemente, imposta la loro posizione condivisa su un gruppo contenitore. Tieni il perno di rotazione separato dalla questione dell'ordine di scala.

Riapri il file salvato nella sua destinazione ed esamina l'intera estensione del simbolo. Una trasformazione corretta può comunque spostare la grafica oltre il viewBox o in una regione di ritaglio. La guida alla modifica degli SVG descrive il processo più ampio di pulizia ed esportazione.

Se il simbolo esiste soltanto come PNG o JPG e ti servono contorni modificabili, il vettorializzatore di loghi di PerfectVector può preparare un candidato SVG. Esamina sagoma, apertura e forme separate, poi raggruppa la grafica recuperata e applica le trasformazioni di posizione nel tuo editor o codice.

Una bitmap può essere spostata e scalata senza vettorializzazione. Usa il ricalco quando servono forme modificabili e conserva un originale vettoriale esistente quando lo hai. Per geometria o scritte esatte di un logo, può comunque servire una ricostruzione manuale; la guida alla vettorializzazione dei loghi spiega come scegliere quel metodo iniziale.

FAQ

SVG applica le trasformazioni da sinistra a destra o da destra a sinistra? L'elenco corrisponde a sistemi di coordinate annidati nell'ordine scritto, dall'esterno all'interno. Quando calcoli dove arriva un punto sorgente, applica prima la funzione più a destra e procedi verso l'esterno, a sinistra.

Perché invertire translate e scale sposta il logo? Con scale seguito da translate nell'elenco dell'attributo, la scala moltiplica anche la traslazione. Con translate seguito da scale, la traslazione resta fuori da quella scala. Gli stessi valori possono quindi produrre dimensioni uguali in posizioni diverse.

Una traslazione esterna mantiene fisso ogni punto quando ridimensiono il gruppo interno? No. Mantiene separati i valori della traslazione esterna dalla scala interna. I punti lontani dall'origine locale si spostano comunque quando vengono scalati. Scegli un punto di ancoraggio e calcola la traslazione necessaria per posizionarlo.

Fonti

1. W3C — Attributo transform SVG — Definisce la relazione tra elenchi di trasformazioni e sistemi di coordinate annidati.
2. MDN — transform SVG — Documenta sintassi delle trasformazioni, mappatura delle matrici e precedenza del CSS.
3. MDN — getScreenCTM — Descrive la matrice usata per mappare le coordinate SVG verso il viewport del documento.
4. MDN — getBBox — Spiega i limiti locali e l'esclusione delle trasformazioni dell'elemento misurato.

Se al tuo logo sorgente serve geometria modificabile, prepara un candidato SVG con PerfectVector, esamina contorni e parti separate, poi scegli un ancoraggio e verifica la posizione finale dopo il ridimensionamento.