Controllare svg con css

**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

Hybrid View

Permessi di invio