SVG/ filtri

[Drusilla99]

Buongiorno, vorrei variare il colore di alcuni elementi decorativi realizzati con più svg in background senza dover creare più immagini di diverso colore da sostituire.

Ho trovato vari tutorial che fanno riferimento all'utilizzo dei filtri ( es:
filter: invert(61%) sepia(17%) saturate(1334%) hue-rotate(202deg) brightness(96%) contrast(90%); )

però sono sempre riferiti ad un elemento <svg></svg> inserito nell'html a cui viene associata una classe css che contiene il filtro.

Ma il mio svg in background fa già parte di una classe css e se provo ad aggiungerci i parametri del filtro mi cambia il colore non dell'svg ma di tutto il div a cui è associata la classe.

Volevo sapere per cambiare colore all' svg con i filtri devo necessariamente togliere il css dal background oppure c'è un modo per farlo comunque?

Se la risposta è si mi potreste indicare come fare per favore?

Vi posto quello che ho fatto io, la sintassi è sbagliata, ma non so quale sia quella corretta..
.green_background {
width:600px;
height:800px;
background-image: url("../img/flowers.svg");
filter: invert(61%) sepia(17%) saturate(1334%) hue-rotate(202deg) brightness(96%) contrast(90%);
background-repeat: no-repeat;
padding:0;
margi:0;
color:#fff;
}

Grazie mille per l'attenzione

[KillerWorm]

Ciao, non è attualmente possibile applicare i filtri esclusivamente all'immagine di background, il filtro viene infatti applicato all'intero elemento, come tu stesso hai accennato.
In genere è necessario usare un ulteriore elemento di supporto per definire lo sfondo e poter applicare il filtro ad esso senza intaccare il resto dei contenuti.

Puoi usare uno pseudo-elemento, posizionato in modo assoluto, in cui definire il background e il filtro. Lo pseudo-elemento risulterà quindi sotto il contenuto.

In modo analogo puoi definire un contenitore nel quale includere due altri specifici contenitori, uno per il background filtrato (con posizione assoluta e z-index:-1), e l'altro per i contenuti (che risulterà in sovraposizione rispetto al background).

Oppure puoi usare due contenitori annidati in cui, per quello esterno, definisci il background mentre in quello interno definisci la proprietà backdrop-filter con la quale è possibile applicare l'effetto del filtro esclusivamente su ciò che si trova sotto l'elemento. Va da sé che, se sotto l'elemento si trova l'immagine di background applicata al contenitore esterno, il filtro risulterà visibile esclusivamente su tale immagine.

Qui qualche tutorial su queste e altre possibili soluzioni:


* Apply A Filter To A Background Image css-tricks.com
* How to Apply a CSS Filter to the Background Image of an Element tutorialrepublic.com
* Adding a Blur Effect to a Background Image With CSS and Cloudinary cloudinary.com



Prova e fai sapere se riesci.
Buon proseguimento

[Drusilla99]

Funziona grazie mille