Unità clipPath SVG: adatta una forma al suo oggetto

Usa clipPathUnits="objectBoundingBox" quando una forma di ritaglio deve adattarsi ai limiti dell'oggetto deformandosi. Normalizza prima le coordinate della forma. Usa userSpaceOnUse quando serve un posizionamento esplicito o una scala uniforme che conservi le proporzioni della forma.

Cambiare soltanto l'attributo non converte un tracciato disegnato in centinaia di unità in una forma fra zero e uno. Può spostare quasi tutto il ritaglio fuori dall'oggetto. Questa guida usa una sagoma originale di segnalibro per mostrare il cambiamento di coordinate, la deformazione risultante e un adattamento centrato che mantiene quadrata l'apertura a rombo.

Il ritaglio controlla la visibilità. Non rifila i tracciati sottostanti trasformandoli in nuova geometria modificabile. Se hai già una sagoma SVG pulita, usala direttamente; il ricalco è pertinente soltanto quando devi recuperare quella sagoma da un'immagine raster.

Scegli il sistema di coordinate prima di ridimensionare

Il valore predefinito è userSpaceOnUse. Le coordinate del suo ritaglio appartengono al sistema di coordinate utente dell'elemento che fa riferimento al ritaglio. Con objectBoundingBox, il limite superiore sinistro dell'oggetto corrisponde a (0, 0) e il limite inferiore destro a (1, 1). Consulta il riferimento clipPathUnits.

Il riquadro delimitatore dell'oggetto non è necessariamente il viewBox dell'SVG esterno. Ritagliare un gruppo usa i limiti di quel gruppo, che possono differire da quelli di un rettangolo al suo interno. Per una prima prova prevedibile, applica il ritaglio direttamente a un rettangolo con dimensioni note.

Confronta un oggetto largo con uno alto

I limiti esterni del nostro segnalibro sono x=20, y=10, width=100, height=100. Il rombo è un secondo sottotracciato nello stesso tracciato. La prova lo applica a rettangoli di 200 × 120 e 120 × 200 in unità SVG locali.

La colonna centrale riempie i limiti di ogni oggetto, ma il suo rombo diventa largo o alto. La colonna destra conserva il rombo e l'incavo inferiore, lasciando spazio lungo l'asse più lungo dell'oggetto. Tutte e sei le aperture rimangono trasparenti.

Salva l'esempio completo sotto come clippath-comparison.svg e aprilo in un browser. Le colonne seguono l'ordine dell'immagine. La riga superiore usa rettangoli larghi; quella inferiore usa rettangoli alti. Le traslazioni di visualizzazione dispongono i campioni e non cambiano le dimensioni locali degli oggetti.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

Il colore verde petrolio appartiene ai rettangoli. Il tracciato di ritaglio ne fornisce il contorno visibile. Lo screenshot aggiunge etichette e una scacchiera intorno a questo stesso SVG; il file autonomo ha uno sfondo trasparente.

Normalizza i limiti sorgente, compresa l'origine

Per un punto (x, y) in un sorgente con limiti (minX, minY, width, height), calcola:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Qui corrisponde a (x - 20) / 100 e (y - 10) / 100. La matrice nella definizione box esegue entrambe le operazioni senza riscrivere i dati del tracciato:

matrix(0.01 0 0 0.01 -0.2 -0.1)

Associa (20, 10) a (0, 0) e (120, 110) a (1, 1). Dividere per 100 senza sottrarre l'origine lascerebbe la forma spostata all'interno dell'oggetto. La mappatura del riquadro delimitatore ridimensiona poi il risultato normalizzato in modo indipendente lungo larghezza e altezza dell'oggetto.

Usa i limiti effettivi della geometria che vuoi normalizzare. Un viewBox può includere spazio vuoto deliberato, quindi le sue dimensioni non devono necessariamente coincidere con i limiti della sagoma. Se vuoi conservare quello spazio, usa deliberatamente il rettangolo del viewBox invece di mescolare accidentalmente le due misure.

Per grafica importata con trasformazioni annidate, misura e normalizza in un solo sistema di coordinate coerente. Risolvi quelle trasformazioni in un editor prima di copiare i dati grezzi del tracciato se non puoi tenerne conto con sicurezza. La procedura di modifica degli SVG tratta l'ispezione di tracciati e gruppi prima della consegna.

Conserva le proporzioni con un solo fattore di scala

Per un rettangolo di destinazione nella posizione locale (0, 0), con larghezza W e altezza H, usa:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

L'oggetto largo dà s=1.2, tx=16 e ty=-12. Il suo ritaglio occupa x=40..160 e y=0..120. L'oggetto alto dà s=1.2, tx=-24 e ty=28, collocando il ritaglio in x=0..120 e y=40..160.

Sono matrici esplicite in userSpaceOnUse, quindi ricalcolale quando cambiano le dimensioni locali dell'oggetto. Visualizzare soltanto l'intero SVG con dimensioni CSS diverse ridimensiona tutta la composizione insieme. Cambiare un rettangolo al suo interno da largo ad alto è un'operazione diversa.

Questo calcolo presuppone larghezza e altezza sorgente diverse da zero e nessuna rotazione o inclinazione non considerata. È un'operazione di adattamento all'interno: lasciare spazio è previsto. La deformazione con unità del riquadro delimitatore è appropriata quando riempire l'oggetto conta più di conservare le proporzioni del motivo.

Mantieni l'apertura nella geometria di ritaglio

L'esempio colloca clip-rule="evenodd" su ogni use all'interno del suo clipPath. Il tracciato referenziato contiene sia il segnalibro esterno sia il sottotracciato del rombo. La regola determina quali regioni di quella forma composta si trovino all'interno del ritaglio.

Collocare clip-rule sul rettangolo verde petrolio non imposta la regola della forma di ritaglio. Analogamente, una fill-rule usata per disegnare il sorgente non sostituisce la regola di ritaglio. Il riferimento MDN su clip-rule spiega il suo ambito all'interno di un clipPath.

Non aggiungere un rombo bianco separato aspettandoti che sottragga dal ritaglio. Le sagome figlie di un tracciato di ritaglio vengono combinate in una regione visibile; i loro colori non agiscono come valori di una maschera in bianco e nero. Per un foro come questo, usa il tracciato composto e la regola di avvolgimento prevista. La guida ai fori SVG riempiti spiega la struttura sottostante dei tracciati.

Se il progetto richiede bordi parzialmente trasparenti o visibilità basata sulla luminanza, confronta un clipPath e una maschera SVG sulla stessa immagine. Un ritaglio è utile per un confine geometrico; una maschera offre un modello di visibilità diverso. Per un'icona monocromatica disegnata tramite CSS, consulta la guida alle maschere CSS SVG.

Controlla i limiti e il risultato esportato

Una linea orizzontale o verticale può avere un riquadro delimitatore geometrico di altezza o larghezza zero anche quando il tratto è visibile. Evita objectBoundingBox per tali oggetti e non dividere per una dimensione sorgente zero durante la normalizzazione. La specifica delle coordinate SVG esclude lo spessore del tratto da questo calcolo del riquadro delimitatore e mette in guardia contro questi casi degeneri.

Prima della consegna:

1. Conferma che l'ID del ritaglio referenziato esista e sia univoco nel documento.
2. Confronta oggetti larghi e alti, compresa l'apertura più piccola.
3. Controlla sia i limiti sorgente sia quelli dell'oggetto nei rispettivi sistemi di coordinate previsti.
4. Salva e riapri l'SVG esportato nell'applicazione che lo utilizzerà.
5. Conserva la geometria originale quando il ritaglio deve rimanere modificabile.

La specifica CSS Masking stabilisce che il ritaglio cambia il rendering, non la geometria intrinseca dell'elemento. Un'applicazione per taglio o elaborazione della geometria può quindi richiedere una vera intersezione di tracciati o un'altra operazione nell'editor. Conferma i tracciati risultanti in quell'applicazione; una buona anteprima nel browser, da sola, non dimostra che il file sia pronto al taglio.

Recupera una sagoma raster quando necessario

PerfectVector è adatto quando un motivo personalizzato esiste ormai soltanto come PNG o JPG e servono contorni modificabili per il ritaglio. Converti quell'immagine in SVG, poi ispeziona bordo esterno, aperture interne e forme di sfondo indesiderate prima di estrarre la sagoma. Scegli quali contorni appartengono al ritaglio; i colori del sorgente non definiscono intensità di ritaglio separate.

Conserva un originale vettoriale esistente se lo possiedi. Un semplice segnalibro geometrico può essere disegnato direttamente, come questo esempio. La vettorializzazione non sceglie le unità di ritaglio, non normalizza i limiti e non esegue una rifilatura booleana permanente. Per indicazioni più ampie sulla scelta del sorgente, leggi la panoramica sulla vettorializzazione delle immagini.

FAQ

objectBoundingBox conserva le proporzioni della forma? No. Associa il ritaglio normalizzato alla larghezza e all'altezza dell'oggetto in modo indipendente. Usa una scala uniforme in userSpaceOnUse quando la sagoma deve mantenere le proprie proporzioni.

Perché cambiare clipPathUnits nasconde la forma? Le coordinate del tracciato potrebbero essere ancora nelle unità originali del sorgente. Normalizzale nel sistema di coordinate relativo all'oggetto, compresa l'origine sorgente, oppure mantieni userSpaceOnUse e posizionale esplicitamente.

Il ritaglio elimina le parti nascoste del mio SVG? No. Il ritaglio cambia ciò che viene renderizzato mantenendo la geometria sottostante. Usa un'operazione appropriata di modifica dei tracciati se il file consegnato richiede contorni rifilati permanentemente.

Fonti

1. MDN — clipPathUnits — Scelte delle coordinate e interpretazione predefinita nello spazio utente.
2. MDN — clip-rule — Collocazione della regola di avvolgimento all'interno dei tracciati di ritaglio.
3. W3C — Sistemi di coordinate SVG — Mappatura del riquadro delimitatore, esclusione del tratto e limiti delle dimensioni zero.
4. W3C — CSS Masking — Geometria di ritaglio, sagome combinate e tracciati sottostanti invariati.

Se il ritaglio parte da un motivo raster, prepara il suo SVG con PerfectVector, ispeziona sagoma e aperture, poi prova entrambe le proporzioni degli oggetti prima di scegliere fra deformazione e adattamento uniforme.