Un utente ha chiesto informazioni su SVG Support di Wordpress

Colora l’immagine SVG con CSS

Un utente ha chiesto 👇

Ciao
grazie per il tuo plugin!
Domanda Come posso cambiare il colore dell’immagine SVG con CSS? C’è un tutorial?

Grazie

Autore del plugin

(@benbodhi)

1 anno, 2 mesi fa

Ciao,

Sono contento che ti piaccia il mio plugin 🙂

Potete fornire un collegamento al sito per favore?

Tuttavia è abbastanza facile, devi solo concentrarti sulla giusta classe del tuo elemento e applicare il colore o riempire il colore.

Per esempio:

.your-svg-class { fill: red; color: red; }

Probabilmente dovrai usare solo uno di questi (riempimento o colore), che di solito è pieno, ma dipende specificamente dal tuo SVG.

Spero che aiuti. Fammi sapere come vai.

PS. Sto lavorando a un sito web con alcuni suggerimenti e tutorial. Non esiste ancora un MTE, ma è stato fatto.

Lanciatore di thread

(@woodypad)

1 anno, 2 mesi fa

Ciao,
Il sito è ancora locale, ma sto usando plguin per inserire solo icone.
Ho già provato come potresti dire, ma non funziona.
Devo salvare il file svg in un modo particolare?

Grazie

Autore del plugin

(@benbodhi)

1 anno, 2 mesi fa

Ciao,

È difficile dire cosa sta succedendo. Normalmente dovresti essere in grado di salvare.
Puoi inviare il file SVG in modo che io possa testare per favore?

Lanciatore di thread

(@woodypad)

1 anno, 2 mesi fa

Ciao,
Ho provato e riprovato.
All’interno di WPbakery e all’interno di una normale sezione WP, non c’è nulla di colorato.
Allego un file svg di prova.
https://www.dropbox.com/s/ugo0u01k0jyw7e0/SVGtest.svg?dl=0

Grazie

Autore del plugin

(@benbodhi)

1 anno, 2 mesi fa

Devi assicurarti che l’SVG sia portato online o nessun SEC toccherà gli elementi in esso contenuti. Puoi verificare se viene fornito come codice SVG o come tag IMG con SVG come src.

I 2 elementi nel tuo SVG che verrebbero forniti sarebbero influenzati dalla SEC:

circle#Ellipse_97 {
    fill: green;
}
path#Path_461 {
    fill: blue;
}

Puoi cambiare i colori in quello che vuoi.

Se vuoi modificare gli obiettivi, apri il tuo SVG in un editor di codice come il testo sublime. Puoi aggiungere le tue classi ai 2 elementi e concentrarti su di loro invece.

Lanciatore di thread

(@woodypad)

1 anno, 1 mese fa

Ciao,
scusa non riesco a farlo funzionare …
Nemmeno con il codice che hai fornito.
C’è sicuramente qualcosa che mi sfugge.

Mi è chiaro come modificare il contenuto del file SVG, questo non è un problema.
Ma non riesco a capire perché non cambi i colori con i CSS.
Qualcosa dovrebbe essere attivato nelle impostazioni?

Grazie

Autore del plugin

(@benbodhi)

1 anno, 1 mese fa

Ciao,

Avresti bisogno di una modalità di alto livello e devi assicurarti che il tuo SVG sia consegnato online in modo da poterti concentrare sugli elementi interni.

(@ grafiker29)

1 anno, 1 mese fa

Anch’io ho questo problema. Ho implementato la modalità avanzata e lo svg viene portato online ma non riesco a concentrarmi sugli elementi interni con CSS.

Questa risposta è stata modificata 1 anno, 1 mese fa da. Autore del plugin

(@benbodhi)

1 anno, 1 mese fa

Ciao @ grafiker29

Dovresti davvero iniziare il tuo thread anche se suona così.

Se il tuo SVG è in linea e vedi gli elementi all’interno dell’ispettore, tutto ciò che devi fare è usare il CSS necessario per manipolare quegli elementi.

Se hai un SVG in linea, questa è la fine della linea per il mio plugin, il resto è completamente esterno.

Di solito se non puoi cambiare qualcosa con i CSS, dovrai aumentare la specificità.

Ad esempio, se questo non funziona:
.your-svg-class { fill: red; }

Sembrerebbe che ci sia già un CSS di alto livello che gli dice quale colore usare … OPPURE i colori si trovano già all’interno del codice SVG.

Devi solo essere il più specifico possibile. Ecco una versione eccellente:
html body .your-svg-class {fill: red;}

Questo potrebbe anche non funzionare, deve essere specifico per il codice esatto. Ma spero che questo aiuti.

Giusto per essere chiari, questo accade dopo che il mio plugin fa il suo post. Potrebbe essere necessario trovare uno sviluppatore per riparare la SEC per te.

Metterò insieme un sito pieno di risorse per aiutare le persone a utilizzare davvero la potenza dei miei plugin quest’anno. Capirò come scrivere CSS per manipolare i tuoi elementi SVG.

Nel frattempo, se vuoi che ti dia un’occhiata, apri un nuovo thread e condividi il tuo URL e le informazioni sul problema e lo prenderò rapidamente.

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *