Transform origin SVG: ruota la grafica sul suo centro

Per ruotare grafica SVG attorno al proprio centro con CSS, inserisci i tracciati correlati in un gruppo e applica transform-box: fill-box e transform-origin: center a quel gruppo. Poi applica lì la rotazione. Le due proprietà rispondono a domande diverse: quale rettangolo fornisce il riferimento e dove si trova il perno dentro quel rettangolo.

Se l'icona importata oscilla attraverso la tela, esamina quel riferimento prima di cambiare le coordinate dei tracciati. Se le sue parti ruotano separatamente, controlla quali elementi ricevono la trasformazione. La grafica vettoriale esistente di solito richiede una correzione del raggruppamento o della trasformazione; il ricalco è utile soltanto quando ti servono prima tracciati modificabili da una sorgente raster.

Perché center da solo può ancora spostare la grafica

Per un normale figlio SVG come un tracciato o un gruppo, l'origine di trasformazione predefinita è 0 0. Gli elementi SVG radice hanno un valore predefinito diverso. Con il valore predefinito transform-box: view-box, impostare l'origine su center si riferisce al viewport di riferimento SVG anziché ai limiti della grafica stessa. Il riferimento MDN di transform-origin SVG spiega sia i valori predefiniti sia queste eccezioni.

Lo spazio vuoto attorno a un logo quindi conta. Un piccolo simbolo posizionato verso un angolo di un'ampia area di disegno ha un centro diverso da quello dell'area. transform-box: fill-box cambia il riferimento al riquadro delimitatore dell'oggetto. Non ritaglia l'SVG e non rimuove lo spazio vuoto. Il riferimento di transform-box definisce i riquadri disponibili, compreso stroke-box quando serve un riferimento che includa il tratto.

Ruota due tracciati come un unico simbolo

Salva questo esempio completo come rotation.svg e aprilo in un browser. Usa un quadrato originale e un accento triangolare staccato, entrambi lontani dall'origine delle coordinate. Il CSS si trova dentro l'SVG affinché il file autonomo porti con sé la regola di rotazione.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Prima della rotazione, la grafica combinata si estende da x = 80 a 220 e da y = 50 a 130. Il suo riquadro è largo 140 unità e alto 80, quindi il centro è (150, 90). Quadrato e accento mantengono la loro relazione quando il gruppo ruota.

Abbiamo renderizzato in un browser quattro stati ad angolo fisso degli stessi tracciati, letto la geometria e riaperto separatamente l'SVG completo sopra. Il confronto usa aree di visualizzazione più ampie per lasciare spazio al risultato con origine predefinita. Sono tracciati dimostrativi scritti a mano, non output di conversione PerfectVector né un test di ogni browser ed editor.

La versione con origine predefinita sposta il simbolo attorno a (0, 0). Le due versioni con gruppo centrato corrispondono. Nell'ultimo pannello, il quadrato ruota attorno a (120, 90) mentre l'accento triangolare ruota attorno a (195, 90). Ogni parte rimane vicina alla posizione iniziale, ma il simbolo non ruota più come un unico oggetto.

Per il tuo file, seleziona soltanto le parti che devono muoversi insieme. Rettangoli di sfondo, crocini di registro o tracciati estranei lontani possono ingrandire i limiti di un gruppo. Il flusso di modifica SVG tratta l'esame e la pulizia del file prima di aggiungere un comportamento.

Usa coordinate esplicite quando il perno è una scelta di design

Un attributo di trasformazione SVG può indicare direttamente l'angolo e il perno. Nell'esempio, sostituisci <g class="artwork"> con <g transform="rotate(35 150 90)">. Lascia i due tracciati al suo interno. Rimuovere la classe impedisce anche alla trasformazione CSS di sovrascrivere l'attributo.

La forma rotate(angle cx cy) dell'attributo usa gradi seguiti dal perno nel sistema di coordinate utente attuale. Il CSS rotate(35deg) ha una sintassi diversa e prende l'origine dalla proprietà separata. Se una trasformazione CSS e l'attributo transform SVG agiscono sullo stesso elemento, il CSS ha priorità. Consulta il riferimento MDN dell'attributo transform.

Le coordinate esplicite sono utili per una cerniera, una lancetta o un perno del logo deliberatamente decentrato. Mantienile nello stesso sistema di coordinate locale del gruppo che ruoti. Una coordinata misurata sullo schermo non è automaticamente una coordinata che puoi incollare in un gruppo SVG annidato.

Se il gruppo esistente ha già una trasformazione di posizionamento, conservala e metti la rotazione su un nuovo gruppo interno che contiene la grafica. Poi prova il file esportato. Sostituire una trasformazione esistente può eliminare la traslazione o la scala che posizionava il simbolo. Se cambiare la scala sposta anche il simbolo, l'esempio dell'ordine delle trasformazioni SVG mostra come si combinano traslazione e scala.

Leggi i limiti prima di calcolare un centro

Per un gruppo semplice come questo esempio, il calcolo del centro è:

cx = x + width / 2
cy = y + height / 2

Nella nostra misurazione nel browser, getBBox() sul gruppo restituiva x: 80, y: 50, width: 140 e height: 80. La sua rotazione non cambiava quei valori locali del riquadro. La documentazione getBBox distingue questi valori nello spazio utente da getBoundingClientRect(), il cui rettangolo è relativo al viewport del browser.

Per contorni di selezione o un viewBox adattato, il flusso dei riquadri delimitatori SVG mostra come convertire tra quei sistemi di coordinate e controllare i margini del tratto.

Misura l'elemento che intendi ruotare. Le trasformazioni dei figli possono influenzare i limiti del gruppo contenitore: il nostro gruppo con figli ruotati separatamente aveva limiti diversi dalla coppia originale. Un contenitore, una scala annidata o una forma estranea meritano un controllo prima di riutilizzare i semplici numeri sopra.

Il centro del riquadro non è sempre il centro visivo

Il quadrato in questo esempio occupa molta più area dell'accento triangolare. Il punto medio del loro riquadro combinato si trova comunque a metà tra il bordo più a sinistra e quello più a destra. È una regola geometrica; non valuta se il disegno appare equilibrato mentre ruota.

Parti dal centro del riquadro, esamina il simbolo a diversi angoli e passa a un perno esplicito se il disegno lo richiede. Una lancetta di orologio di solito necessita del suo punto di attacco. Un logo con un accento decentrato può richiedere un centro scelto dal designer. Mantieni distinta questa decisione dalla correzione di un'origine basata accidentalmente sul viewport.

La rotazione richiede anche spazio. Un'esportazione stretta attorno alla grafica non ruotata può tagliare gli angoli dopo la rotazione. Lascia abbastanza spazio nell'area di visualizzazione ed esamina eventuali ritagli del genitore. Se l'intero file viene importato alla scala sbagliata, usa la diagnosi delle dimensioni SVG prima di cambiare singole parti.

Questo flusso ruota una forma esistente senza riscriverne il contorno. Se il tuo obiettivo è trasformare un contorno in un altro, la guida al morph SVG tratta il problema separato della corrispondenza della geometria dei tracciati.

Prepara la sorgente prima di impostare il perno

Se l'icona esiste soltanto come PNG o JPG e devi modificarne le forme separate, PerfectVector può aiutare a preparare un candidato SVG. Converti la grafica in vettore, esamina sagoma e dettagli staccati, poi raggruppa le parti che devono ruotare insieme. Controlla le forme di sfondo indesiderate prima di misurare il gruppo.

Una bitmap può ruotare nel suo insieme senza ricalco. Usa la vettorializzazione quando la geometria modificabile fa parte del lavoro. Se hai già un originale vettoriale utilizzabile, conservalo; cambiare l'origine di trasformazione non ripara un contorno danneggiato e ricalcare una copia raster aggiunge un passaggio inutile di ricostruzione.

Prima di consegnare il file, riapri l'SVG esatto nella sua destinazione. Conferma che le parti previste ruotino insieme, il perno rimanga dove lo hai scelto e la grafica ruotata abbia spazio. Mantieni un originale invariato per future modifiche. Gli articoli del blog sui flussi SVG trattano controlli correlati di preparazione ed esportazione.

FAQ

Perché transform-origin: center ruota il mio SVG attorno alla tela? Per un figlio SVG che usa il riferimento view-box predefinito, center si riferisce al viewport di riferimento SVG. Imposta transform-box su fill-box nell'elemento che intendi ruotare se vuoi invece il suo riquadro delimitatore dell'oggetto.

Devo ruotare il gruppo o ogni tracciato? Ruota il gruppo quando le parti devono muoversi come un unico simbolo. Applicare fill-box e center a ogni tracciato dà a ogni parte un proprio perno, cambiando la loro disposizione combinata.

Il centro fill-box rende visivamente equilibrato un logo asimmetrico? Seleziona il centro del riquadro delimitatore dell'oggetto. L'equilibrio visivo può richiedere un perno diverso, quindi esamina il logo a diversi angoli e scegli coordinate esplicite quando serve.

Fonti

1. MDN — SVG transform-origin — Definisce i valori predefiniti dell'origine SVG, le eccezioni degli elementi radice e la relazione con il riquadro di riferimento.
2. MDN — transform-box — Definisce riquadri di riferimento dell'oggetto, del tratto e del viewport.
3. MDN — SVG transform — Documenta coordinate esplicite di rotazione, trasformazioni dei gruppi e precedenza CSS.
4. MDN — getBBox — Spiega misurazioni della geometria locale e differenze dai rettangoli del viewport.

Ti servono forme modificabili da una sorgente raster? Prepara un SVG con PerfectVector, esamina le parti recuperate, poi raggruppale e controlla il perno scelto nel file esportato finale.