Ombra SVG tagliata? Controlla filtro e viewport

Un'ombra SVG tagliata può incontrare due limiti diversi. La regione del filtro limita dove viene calcolato l'effetto; il viewport SVG o un contenitore genitore possono poi ritagliare il risultato renderizzato. Aumenta prima la regione del filtro. Se l'ombra termina ancora al bordo dell'immagine, esamina il viewport e le sue regole di ritaglio.

Non devi ricalcare un SVG i cui tracciati sono già intatti. Questa guida cambia l'area di lavoro dell'effetto e la tela visibile conservando la stessa sagoma originale.

Due limiti, un tracciato invariato

Abbiamo creato a mano una piccola sagoma e aperto tre versioni in un browser. Ognuna usa lo stesso tracciato e impostazioni feDropShadow: dx="22", dy="18" e stdDeviation="12". La cattura qui sotto mostra un rendering effettivo nel browser, non una conversione PerfectVector.

Nella prima versione, la regione del filtro va da (50, 50) a (210, 180). Questo lascia un taglio netto lungo i bordi destro e inferiore dell'ombra. Nella seconda, la regione cresce fino a coprire da (-20, -20) a (300, 280), ma l'SVG mostra ancora soltanto 0 0 240 220. Il bordo destro dell'ombra raggiunge ora il riquadro del viewport e viene tagliato lì.

La terza versione mantiene la regione del filtro più grande e cambia il viewBox in -20 -20 320 300. Anche width e height diventano 320 e 300, così tutte e tre le dimostrazioni mantengono un'unità SVG per pixel CSS. Lo spazio aggiuntivo contiene l'ombra visibile senza ridimensionare il tracciato.

Espandi la regione del filtro nel sistema di coordinate giusto

Gli attributi x, y, width e height di <filter> ne definiscono la regione. I valori predefiniti sono -10%, -10%, 120% e 120%: è già presente un po' di margine, ma può essere insufficiente per specifici valori di spostamento e sfocatura. MDN documenta questi valori predefiniti.

Controlla filterUnits prima di cambiare i numeri:

• objectBoundingBox, il valore predefinito, interpreta la regione rispetto al riquadro dell'elemento filtrato. Un margine percentuale dipende dalle dimensioni della forma.
• userSpaceOnUse consente di definire la regione nel sistema di coordinate utente corrente dell'elemento che fa riferimento al filtro. È utile quando conosci le coordinate della grafica.

Queste regole riguardano la regione, come descritto nella documentazione di filterUnits. Non cambiano automaticamente le unità dello spostamento o della sfocatura dell'ombra.

primitiveUnits controlla i valori di lunghezza dentro le primitive di filtro. Il valore predefinito è userSpaceOnUse; lo impostiamo esplicitamente nell'esempio così 22, 18 e 12 conservano quel significato. Passare a objectBoundingBox cambierebbe il modo in cui quei valori vengono interpretati. MDN distingue le unità delle primitive da quelle della regione del filtro.

Per il tuo file, esamina i limiti dell'oggetto o gruppo filtrato, poi aggiungi spazio sufficiente nelle direzioni in cui si estende l'ombra. I numeri qui sotto sono adatti a questa dimostrazione. Non sono un margine universale per le ombre. Se aumenti la sfocatura, sposti l'ombra o trasformi il gruppo filtrato, controlla di nuovo il risultato.

Dai spazio anche al viewport SVG

Salva questo esempio completo come shadow.svg e aprilo in un browser. È l'SVG esatto usato per il terzo stato, controllato anche come file autonomo:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

Il viewBox ha quattro valori: x minimo, y minimo, larghezza e altezza. Mappa quel rettangolo di coordinate utente sul viewport SVG. Aumentarne le dimensioni mantenendo la stessa larghezza e altezza visualizzate fa apparire la grafica più piccola; non aggiunge spazio di layout fuori dall'elemento. MDN spiega la mappatura del viewBox.

Per riprodurre i due errori, cambia soltanto questi valori in una copia dell'esempio:

1. Per lo stato centrale, mantieni invariato il filtro ma imposta sulla radice width="240", height="220" e viewBox="0 0 240 220".
2. Per il primo stato, mantieni quel viewport più piccolo e imposta anche sul filtro x="50", y="50", width="160" e height="130".
3. Ripristina l'esempio completo e confronta i bordi destro e inferiore. I dati del tracciato non cambiano mai.

Se l'intero disegno è fuori dalla tela, segui i più ampi controlli per SVG vuoti. Se il disegno è visibile ma le dimensioni cambiano durante l'importazione, esamina la relazione tra unità SVG e dimensioni prima di regolare la geometria.

Perché overflow può aiutare un SVG inline ma non il file

L'esempio imposta esplicitamente overflow="hidden" così il limite del viewport è riproducibile. Per un SVG inline, overflow="visible" può rimuovere quel ritaglio del viewport. Non può recuperare pixel già scartati nella regione del filtro e un antenato con il proprio ritaglio può ancora nascondere il risultato. Il CSS può anche sovrascrivere l'attributo di presentazione SVG. La documentazione SVG di overflow descrive queste regole di ritaglio.

Esamina il percorso effettivo di incorporamento. Un SVG inline su una pagina spaziosa, un SVG autonomo e un SVG caricato tramite un elemento immagine HTML non offrono lo stesso layout circostante. La cattura a tre stati usa elementi immagine e dà al file corretto spazio interno sufficiente sulla tela. Usa questo approccio quando l'SVG deve essere trasferito come immagine autonoma: includi l'effetto nei limiti previsti, poi riapri quel file esatto nella destinazione.

Se appare corretto da solo ma viene tagliato dentro una scheda, controlla overflow, ritaglio e maschere della scheda. Se fallisce soltanto in uno specifico editor o esportatore, confronta una copia semplificata e consulta il supporto dei filtri di quell'applicazione. La guida ai cambiamenti di aspetto SVG descrive quel distinto problema dell'importatore.

Conserva la geometria e ricostruisci l'effetto separatamente

Un'ombra renderizzata aggiunge un aspetto al tracciato; non trasforma la sfocatura in un altro contorno modificabile. Conserva un originale SVG con la geometria originale. Per un procedimento di taglio, esamina separatamente i contorni dei tracciati: l'ombra visibile non è una linea di taglio aggiuntiva.

Se la sorgente esiste soltanto come PNG o JPG, PerfectVector può aiutare a recuperare geometria SVG prima di aggiungere l'effetto. Converti in vettore la grafica senza ombra, poi esamina contorno, spazi e forme di sfondo indesiderate in un editor. Aggiungi lì l'ombra e testa i suoi limiti con i controlli sopra.

Usa una sorgente senza sfocatura incorporata quando disponibile. Ricalcare un'immagine appiattita non può ripristinare le impostazioni originali del filtro o dimostrare dove il designer volesse terminare la sagoma pulita. Per un simbolo semplice senza una sorgente pulita, il ridisegno manuale può essere la scelta più controllabile. La panoramica sulla vettorializzazione delle immagini spiega cosa ricostruisce il ricalco.

Controlla il file consegnato

Apri l'SVG esportato stesso, non soltanto la tela dell'editor. Conferma che l'ombra prevista rientri alle dimensioni finali di visualizzazione e che l'output contenga ancora i tracciati necessari. Controlla anche la pagina web o applicazione di destinazione effettiva, perché un ritaglio circostante o un filtro non supportato possono reintrodurre il sintomo.

Evita di lasciare una regione del filtro enorme come correzione predefinita. Una regione molto oltre le esigenze dell'effetto rende più difficile comprendere il file; inoltre non può correggere un limite di ritaglio esterno. Usa un margine deliberato, conserva la sorgente senza filtro e ricontrolla dopo aver cambiato sfocatura o spostamento.

FAQ

Perché l'ombra è ancora tagliata dopo aver aumentato la larghezza del filtro? Il viewport SVG, un contenitore genitore, un tracciato di ritaglio o una maschera possono imporre un altro limite. Controlla x e y del filtro oltre a larghezza e altezza, poi esamina dove si allinea il taglio restante.

filterUnits cambia il raggio di sfocatura? filterUnits controlla il sistema di coordinate della regione del filtro. primitiveUnits controlla i valori di lunghezza dentro le primitive di filtro, incluse le impostazioni di spostamento e sfocatura dell'ombra. Tienili separati nella diagnosi del file.

Posso correggere il ritaglio vettorializzando di nuovo l'SVG? Se l'SVG ha già tracciati utilizzabili, correggi invece regione del filtro o viewport. La vettorializzazione appartiene a un passaggio precedente quando la sorgente è grafica raster; non recupera i parametri originali dell'ombra.

Fonti

1. MDN: elemento filter — Definisce l'elemento filtro e il margine predefinito della sua regione.
2. MDN: filterUnits — Spiega coordinate relative al riquadro e allo spazio utente per la regione del filtro.
3. MDN: primitiveUnits — Distingue le lunghezze delle primitive dalla regione esterna del filtro.
4. MDN: viewBox — Descrive come le coordinate utente vengono mappate sul viewport SVG visibile.
5. MDN: overflow — Documenta ritaglio del viewport, valori predefiniti SVG inline e precedenza del CSS.

Parti da una sagoma soltanto raster? Prepara tracciati SVG con PerfectVector, esamina prima il contorno recuperato, poi aggiungi l'ombra e riapri l'SVG finale per controllare entrambi i limiti.