Controllare svg con css

**Luke70** · 15-06-2016, 11:34

Ciao!

Ho visto che si possono modificare gli svg utilizzando fogli di stile, ma ho quanche difficoltà.

Vorrei associare agli svg che utilizzo come icone su una pagina una classe che mi permetta di far diventare lo stroke di un path di colore bianco.

Dove inserisco la classe nell'svg?

**carlomarangoni** · 15-06-2016, 14:19

http://www.html.it/pag/51718/proprie...-stili-allsvg/

**KillerWorm** · 15-06-2016, 14:23

Ciao, così come funziona per il comune html, puoi inserire class come attributo del tag interessato, che in questo caso è il tuo nodo path.
Chiaramente sul css dovrai poi utilizzare le proprietà relative ad svg. Ad esempio, nel tuo caso, potrai specificare stroke:#fff; per definire il bordo bianco.

Per altre informazioni potresti dare uno sguardo a questa guida, se non lo hai già fatto. Mi sembra abbastanza valida e completa.

Edit:
Ho visto ora la risposta di carlomarangoni

**Luke70** · 15-06-2016, 15:21

Grazie mille ad entrambi!

Guide preziosissime.

Ho scoperto che ho fatta un'ingenuità: non si possono modificare gli svg con i css se le inserisci nell'html con un tag <img> o, come ho fatto io, inserendoli come background di un elemento con i css.

Adesso li sto inserendo come object e dovrei farcela anche grazie alle guide che mi avete indicato

**Pandax** · 15-06-2016, 17:26

Originariamente inviata da Luke70

Grazie mille ad entrambi!

Guide preziosissime.

Ho scoperto che ho fatta un'ingenuità: non si possono modificare gli svg con i css se le inserisci nell'html con un tag <img> o, come ho fatto io, inserendoli come background di un elemento con i css.

Adesso li sto inserendo come object e dovrei farcela anche grazie alle guide che mi avete indicato

ci sto provando anch'io ma non ci sto riuscendo nonostante le guide lette...

la domanda sorge spontanea... è possibile modificare un'immagine svg... con un css esterno?

cioè...

se lo inserisco come object

codice:

<object type="image/svg+xml" id="logo" data="/frontend/images/icona_test.svg">
                                <div>SVG logo</div>
</object>

poi in un file css esterno posso mettere uno stile css che mi modifica il colore dell'svg?
dalle mie prove NO

codice:

.st0{clip-path:url(#SVGID_2_);fill:#ff0000;}

mi riesce solo se lo inserisco interamente come svg (codice) nell'html

codice:

<svg version="1.1" id="Livello_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="56.2" height="56.2" viewBox="0 0 56.2 56.2" xml:space="preserve" enable-background="new 0 0 56.194 56.191">
       
        <g id="neon"><circle class="st1" cx="28.1" cy="28.1" r="27.8"/>
            <path class="st0" d="M15.7 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S21.2 45.5 15.7 45.5M15.7 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S21.7 24.5 15.7 24.5M15.7 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S20.5 44.2 15.7 44.2M15.7 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S20.8 26.1 15.7 26.1M16.6 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM19.4 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM21.7 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM23.5 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM7.4 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM14.8 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM12.5 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM9.7 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM16.3 30.4c0 0.4-0.3 0.6-0.6 0.6s-0.6-0.3-0.6-0.6c0-0.3 0.3-0.6 0.6-0.6S16.3 30.1 16.3 30.4M40.5 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S46 45.5 40.5 45.5M40.5 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S46.5 24.5 40.5 24.5M40.5 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8 8.8 3.9 8.8 8.8S45.3 44.2 40.5 44.2M40.5 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S45.6 26.1 40.5 26.1M41.4 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM44.2 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM46.5 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM48.3 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM32.2 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM39.6 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM37.3 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM34.5 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM41.1 30.4c0 0.4-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3 0.3-0.6 0.6-0.6C40.8 29.8 41.1 30.1 41.1 30.4M28.1 24.8c-5.6 0-10.1-4.5-10.1-10.1 0-5.6 4.5-10.1 10.1-10.1 5.6 0 10.1 4.5 10.1 10.1C38.2 20.3 33.6 24.8 28.1 24.8M28.1 3.8c-6 0-10.9 4.9-10.9 10.9 0 6 4.9 10.9 10.9 10.9 6 0 10.9-4.9 10.9-10.9C39 8.7 34.1 3.8 28.1 3.8M28.1 23.5c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S32.9 23.5 28.1 23.5M28.1 5.4c-5.1 0-9.3 4.2-9.3 9.3 0 5.1 4.2 9.3 9.3 9.3 5.1 0 9.3-4.2 9.3-9.3C37.4 9.6 33.2 5.4 28.1 5.4M29 23.4c0.2 0 0.4 0 0.5-0.1V6.1c-0.2 0-0.4-0.1-0.5-0.1V23.4zM31.8 6.8c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V6.8zM34.1 8.3c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V8.3zM35.9 18.7c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V18.7zM19.8 17.5c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V17.5zM27.2 6c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V6zM24.9 6.5c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V6.5zM22.1 21.1c0.2 0.2 0.3 0.3 0.5 0.5V7.9c-0.2 0.1-0.4 0.3-0.5 0.5V21.1zM28.7 9.7c0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6s0.3-0.6 0.6-0.6C28.4 9 28.7 9.3 28.7 9.7"/></g></svg>

La mia necessità ed intenzione sarebbe quella di:
- avere una pagina html
- avere un css esterno della pagina
- avere dei file svg, inseriti/inclusi nella pagina html...
- usare delle classi scritte nel css esterno per modificare colore, dimensioni o altro del file svg incluso sulla pagina html

insomma non andare ad inserire il codice svg completo nella pagina html ma solo il link al file svg,
così che se domani dovessi cambiarlo, lo cambio una volta sola e non devo andare in cerca tra le pagine html del codice di quell'svg..che oltretutto risulterebbe molto poco distinguibile da un'altro svg...

non so se sia chiaro...

mi basterebbe vedere un esempio semplice... così se sbaglio, so dove...

**Pandax** · 16-06-2016, 09:50

Se non mi sono spiegato e non avete capito, chiedete pure...

attualmente come già detto riesco a cambiare il colore dell'immagine svg "solo" se la inserisco come codice nell'html.. quindi con tag svg..ecc..

io vorrei sapere se è possibile e nel caso come si fa... a cambiare colore.. (insomma ad interagire) inserendo l'immagine svg come object o altro.. insomma solo come riferimento all'immagine reale (come fosse una normale immagine jpg insomma)...

**Pandax** · 18-08-2016, 15:23

Nessuno che usi PHP e che abbia usato immagini SVG a cui ha cambiato colore dinamicamente tramite CSS?

come le inserite..?

Io in locale ero riuscito, inserendo gli SVG con un include... e poi tramite css riuscivo a modificare il colore...
ma online mi va in errore String e non so come mai...

conoscete (ed avete usato) altri modi per inserire e poi interagire con gli svg per un cambio colore?

**KillerWorm** · 18-08-2016, 16:28

Personalmente non sono pratico di SVG ma sulla guida indicata (esattamente qui) è spiegato come includere file CSS esterni. Io ho provato col tuo esempio e mi pare funzioni regolarmente. Se tu hai seguito la guida ma non riesci, probabilmente sbagli qualcosa.
Tieni conto che il file CSS va incluso nel file SVG, prima dell'elemento <svg>.

Per la cronaca, io ho fatto in questo modo:

- creato una pagina HTML

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
        <object type="image/svg+xml" id="logo" data="./frontend/images/icona_test.svg">
            <div>SVG logo</div>
        </object>
  </body>
</html>

- create le cartelle secondo il tuo esempio frontend/images

- dentro la cartella images ho creato il file svg in cui ho incluso il foglio di stile (prima riga)

codice:

<?xml-stylesheet href="style.css" type="text/css"?>
<svg version="1.1" id="Livello_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="56.2" height="56.2" viewBox="0 0 56.2 56.2" xml:space="preserve" enable-background="new 0 0 56.194 56.191">
    <g id="neon">
        <circle class="st1" cx="28.1" cy="28.1" r="27.8"/>
        <path class="st0" d="M15.7 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S21.2 45.5 15.7 45.5M15.7 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S21.7 24.5 15.7 24.5M15.7 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S20.5 44.2 15.7 44.2M15.7 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S20.8 26.1 15.7 26.1M16.6 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM19.4 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM21.7 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM23.5 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM7.4 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM14.8 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM12.5 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM9.7 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM16.3 30.4c0 0.4-0.3 0.6-0.6 0.6s-0.6-0.3-0.6-0.6c0-0.3 0.3-0.6 0.6-0.6S16.3 30.1 16.3 30.4M40.5 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S46 45.5 40.5 45.5M40.5 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S46.5 24.5 40.5 24.5M40.5 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8 8.8 3.9 8.8 8.8S45.3 44.2 40.5 44.2M40.5 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S45.6 26.1 40.5 26.1M41.4 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM44.2 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM46.5 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM48.3 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM32.2 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM39.6 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM37.3 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM34.5 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM41.1 30.4c0 0.4-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3 0.3-0.6 0.6-0.6C40.8 29.8 41.1 30.1 41.1 30.4M28.1 24.8c-5.6 0-10.1-4.5-10.1-10.1 0-5.6 4.5-10.1 10.1-10.1 5.6 0 10.1 4.5 10.1 10.1C38.2 20.3 33.6 24.8 28.1 24.8M28.1 3.8c-6 0-10.9 4.9-10.9 10.9 0 6 4.9 10.9 10.9 10.9 6 0 10.9-4.9 10.9-10.9C39 8.7 34.1 3.8 28.1 3.8M28.1 23.5c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S32.9 23.5 28.1 23.5M28.1 5.4c-5.1 0-9.3 4.2-9.3 9.3 0 5.1 4.2 9.3 9.3 9.3 5.1 0 9.3-4.2 9.3-9.3C37.4 9.6 33.2 5.4 28.1 5.4M29 23.4c0.2 0 0.4 0 0.5-0.1V6.1c-0.2 0-0.4-0.1-0.5-0.1V23.4zM31.8 6.8c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V6.8zM34.1 8.3c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V8.3zM35.9 18.7c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V18.7zM19.8 17.5c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V17.5zM27.2 6c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V6zM24.9 6.5c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V6.5zM22.1 21.1c0.2 0.2 0.3 0.3 0.5 0.5V7.9c-0.2 0.1-0.4 0.3-0.5 0.5V21.1zM28.7 9.7c0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6s0.3-0.6 0.6-0.6C28.4 9 28.7 9.3 28.7 9.7"/>
    </g>
</svg>

- nella stessa cartella ho quindi creato il file style.css

codice:

.st0{clip-path:url(#SVGID_2_);fill:#ff0000;}

Chiaramente il percorso del file CSS indicato nel documento SVG è relativo a quest'ultimo, per cui, se il file CSS stà in una cartella differente dal file SVG, bisognerà specificare opportunamente il percorso sull'elemento xml-stylesheet.

Questo è quanto ho provato io, poi è possibile che ci siano altri metodi.

**Pandax** · 22-08-2016, 12:17

Originariamente inviata da KillerWorm

Personalmente non sono pratico di SVG ma sulla guida indicata (esattamente qui) è spiegato come includere file CSS esterni. ....

- dentro la cartella images ho creato il file svg in cui ho incluso il foglio di stile (prima riga)

codice:

<?xml-stylesheet href="style.css" type="text/css"?>
<svg version="1.1" id="Livello_1" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="56.2" height="56.2" viewBox="0 0 56.2 56.2" xml:space="preserve" enable-background="new 0 0 56.194 56.191">
    <g id="neon">
        <circle class="st1" cx="28.1" cy="28.1" r="27.8"/>
        <path class="st0" d="M15.7 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S21.2 45.5 15.....7"/>
    </g>
</svg>

...

Questo è quanto ho provato io, poi è possibile che ci siano altri metodi.

Innanzitutto ti ringrazio per la prova e la spiegazione.
Quello che hai fatto tu è sicuramente un metodo... solo che io volevo evitare di "aprire e modificare" il file .svg
Non che siano grosse modifiche... è solo l'inclusione del css.. ma preferivo evitarlo.

Ho trovato una soluzione a questo link
http://sheelahb.com/blog/how-to-get-...ith-svg-files/

fondamentalmente invece che usare include... si usa file_get_contents

Discussione: Controllare svg con css

Strumenti discussione

Ricerca discussione

Visualizza

Controllare svg con css

Permessi di invio