Pattern SVG: ruota il riempimento, conserva il contorno

Per ruotare un pattern SVG dentro una forma fissa, inserisci patternTransform="rotate(...)" nell'elemento pattern. Mantieni invariata la trasformazione della forma stessa. Per spostare il punto in cui cade la grafica ripetuta, usa invece una traslazione su quello stesso pattern.

Queste modifiche spostano il sistema di coordinate del riempimento. Ruotare un gruppo che contiene la forma sposta anche la geometria visualizzata. Il nostro emblema forato originale rende visibile la differenza: il contorno rimane diritto quando ruota il motivo, mentre un controllo separato dell'oggetto intero inclina l'emblema e la sua apertura.

Scegli l'elemento che deve muoversi

L'attuale documentazione di patternTransform descrive un elenco di trasformazioni applicato alla tessera del pattern. La definizione dei pattern SVG2 spiega i sistemi di coordinate della tessera e la trasformazione della sua colorazione.

In questo esempio, il motivo è un piccolo segno asimmetrico piegato, ripetuto in una tessera da 24 unità. La forma che riceve il riempimento è un tracciato diverso: un distintivo asimmetrico con un'apertura rettangolare. Tenere separati questi ruoli rende più chiara la decisione di modifica.

Usiamo direttamente l'attributo SVG. La nota MDN sull'implementazione di transform in CSS non promette che una proprietà CSS chiamata pattern-transform funzioni nella tua destinazione.

Ruota il riempimento dentro il contorno

Apri un esempio completo di rotazione del riempimento

Salva questo SVG come pattern-emblem.svg e aprilo in un browser. È autonomo, senza immagini esterne o librerie. La rotazione del pattern è di 30 gradi intorno al punto sorgente (100,80); il gruppo che riceve il riempimento non ha trasformazioni.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

La regola di riempimento evenodd lascia aperto il rettangolo interno. Consulta la documentazione di fill-rule per la regola basata sugli attraversamenti. L'apertura appartiene al tracciato dell'emblema, quindi ruotare il riempimento ripetuto non ruota quell'apertura.

Sia patternUnits sia patternContentUnits sono espliciti in questa sorgente. La documentazione di patternUnits definisce il sistema di coordinate della tessera. La nostra guida alle unità dei pattern tratta in dettaglio dimensioni della tessera e coordinate del motivo. Qui li manteniamo fissi per isolare la trasformazione; non è una ricetta per progettare una ripetizione senza giunture.

Confronta rotazione, traslazione e un controllo geometrico

Crea tre copie dell'esempio e cambia soltanto l'attributo indicato:

1. Per il riempimento originale, rimuovi patternTransform dal pattern.
2. Per il riempimento spostato, sostituiscilo con patternTransform="translate(7 5)".
3. Per il controllo dell'oggetto intero, rimuovi la trasformazione del pattern e aggiungi transform="rotate(20 100 80)" all'elemento g che riceve il riempimento.

La copia traslata mantiene l'orientamento del motivo ma cambia il punto in cui cade dentro il distintivo. Un segno sul confine può entrare nella forma dipinta o uscirne. La copia ruotata gira insieme il motivo e il suo reticolo di ripetizione; non fa semplicemente ruotare ciascun motivo intorno al proprio centro.

Per il controllo dell'oggetto, la documentazione dell'attributo transform descrive la rotazione intorno a un punto scelto. Quella trasformazione cambia il modo in cui viene visualizzata la geometria del gruppo. Il suo normale riempimento a pattern si muove con essa; le unità del pattern nello spazio utente non rendono globalmente immobile il riempimento di questo esempio.

Parti da una sola trasformazione mentre diagnostichi il risultato. Se in seguito combini rotazione, traslazione e scala, controllane l'ordine nella guida all'ordine delle trasformazioni SVG. Combinare trasformazioni introduce una questione di coordinate separata che questo confronto controllato evita.

Verifica separatamente geometria e pixel

Abbiamo renderizzato le quattro varianti originali in Chrome a 200×160 e 400×320 pixel CSS. Il rapporto dei pixel del dispositivo nel browser era 2. Ogni sorgente è stata anche decodificata e disegnata in un canvas le cui dimensioni interne corrispondevano alla dimensione di prova indicata, consentendoci di leggerne i pixel indipendentemente dalla schermata.

Ogni file contiene la stessa stringa d dell'emblema e lo stesso tracciato del motivo: due elementi tracciato e nessun elemento immagine. Gli hash dei file completi differiscono perché differiscono le trasformazioni. Il riquadro geometrico locale dell'emblema è (30,25,140,110) in tutti i casi.

Quel solo riquadro locale non rileverebbe la modifica all'oggetto intero. Per questo emblema poligonale abbiamo anche trasformato i cinque vertici esterni attraverso la matrice effettiva del browser e misurato la loro estensione visualizzata. La tabella normalizza il viewport più grande riportandolo alle unità sorgente:

Le estensioni normalizzate coincidevano alle due dimensioni provate. Il controllo dell'oggetto conserva la stessa stringa d, ma la sua geometria visualizzata cambia. L'uguaglianza dei dati sorgente è quindi una prova utile della costruzione del tracciato conservata, non una prova sufficiente che il contorno visibile sia rimasto fermo.

Per le varianti con il solo riempimento modificato, i buffer di pixel dell'intero canvas differivano dall'originale a ogni dimensione. Nel punto sorgente (45,45), il campione originale era lo sfondo della tessera (244,240,228) e quello del riempimento ruotato era il motivo terracotta (193,90,56), entrambi con alfa 255. La traslazione non ha cambiato quel campione specifico, anche se il suo buffer complessivo era diverso. Un solo punto campionato può non rilevare uno spostamento del riempimento.

Alla posizione sorgente (85,80), l'apertura aveva alfa zero in tutti e otto i casi. Anche i limiti dei pixel completamente opachi erano invariati per le tre varianti diritte a ogni dimensione; quei limiti basati su una soglia non sono la stessa misura delle estensioni esatte dei vertici del contorno. Queste osservazioni sono limitate alla nostra sorgente e al browser, non sono una certificazione di compatibilità dei renderer.

Controlla la destinazione salvata prima della consegna

Conserva l'emblema originale come riferimento geometrico e mantieni il trattamento del riempimento in una copia separata. Un paint server ripetuto non trasforma ogni motivo visibile in una forma indipendente selezionabile da un editor o una macchina di taglio successivi. Se quella destinazione richiede geometria espansa, prepara ed esamina quell'espansione separatamente. La guida alla modifica degli SVG copre modifiche più ampie alla sorgente.

Se il contorno ruota inaspettatamente, esamina le trasformazioni del suo gruppo e degli antenati prima di regolare il pattern. Se più copie inline condividono inaspettatamente un solo trattamento, assegna nomi univoci agli ID dei pattern e ai riferimenti fill corrispondenti. Il nostro campione di confronto isola quegli ID; file SVG autonomi separati non condividono quello spazio dei nomi delle risorse a livello di documento.

Se il tuo motivo o emblema personalizzato esiste solo come PNG o JPG e ti servono contorni modificabili, prepara un SVG con PerfectVector, esamina contorno e apertura e conserva un master pulito. Poi costruisci la ripetizione e scegli la trasformazione del riempimento nel tuo codice SVG. La vettorizzazione prepara la grafica; non progetta la ripetizione, non ne sceglie la fase e non garantisce la gestione dei pattern nella destinazione. I tracciati puliti esistenti possono passare direttamente alla modifica del pattern; la guida alla vettorizzazione spiega quando è utile convertire un raster.

Domande frequenti

patternTransform cambia i dati del tracciato dell'emblema? In questo esempio trasforma il riempimento del pattern. La stringa d dell'emblema rimane invariata. Esamina anche le trasformazioni del gruppo che riceve il riempimento e dei suoi antenati, perché la geometria visualizzata può muoversi senza cambiare d.

Posso spostare un pattern senza ruotarlo? Sì. La variante translate(7 5) sposta il riempimento mantenendo l'orientamento del motivo. Mantieni fisse le dimensioni della tessera e la geometria che riceve il riempimento mentre provi l'effetto.

Perché anche il pattern ruota quando ruoto l'intero gruppo? La trasformazione del gruppo cambia la geometria visualizzata che riceve il riempimento e il riempimento stesso. È un'operazione diversa dall'applicare una trasformazione soltanto all'elemento pattern.

I motivi ripetuti sono tracciati modificabili separati? La nostra sorgente ha un tracciato del motivo in un paint server e un tracciato dell'emblema che lo riceve. Le ripetizioni visibili non sono elementi tracciato scritti separatamente; espandile ed esaminale a parte se la tua destinazione richiede quella forma.

Fonti

1. MDN — patternTransform — Elenchi di trasformazioni del pattern e nota sull'implementazione dell'attributo.
2. W3C — Pattern SVG2 — Sistemi di coordinate delle tessere e trasformazione del riempimento.
3. MDN — fill-rule — L'apertura pari-dispari nel tracciato che riceve il riempimento.
4. MDN — transform — Rotazione applicata alla geometria visualizzata del gruppo.
5. MDN — patternUnits — Il sistema di coordinate esplicito della tessera mantenuto fisso in questo confronto.