Autore Topic: Gestire SVG con i CSS (Letto 5315 volte)

nofc_nofc · « **il:** 21 Lug 2015, 15:30:37 »

Salve,
ho inserito un'immagine svg in una pagina di Joomla e volevo gestire i suoi colori tramite il theme.css.
Come faccio a richiamarla? Riporto il codice del file svg:

Codice: [Seleziona]

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 85.2 90.9" enable-background="new 0 0 85.2 90.9" xml:space="preserve">
<g id="XMLID_2_">
    <path id="XMLID_3_" d="M54.9,69.3l-0.7-6.2h-0.3c-2.7,3.8-8,7.3-14.9,7.3c-9.9,0-14.9-7-14.9-14c0-11.8,10.5-18.3,29.4-18.2v-1
        c0-4-1.1-11.3-11.1-11.3c-4.5,0-9.3,1.4-12.7,3.6l-2-5.9c4-2.6,9.9-4.3,16.1-4.3c14.9,0,18.6,10.2,18.6,20v18.3
        c0,4.2,0.2,8.4,0.8,11.7H54.9z M53.6,44.4c-9.7-0.2-20.7,1.5-20.7,11c0,5.8,3.8,8.5,8.4,8.5c6.4,0,10.4-4,11.8-8.2
        c0.3-0.9,0.5-1.9,0.5-2.8V44.4z"/>
</g>
</svg>

Devo far colorare il path id="XMLID_3_".
Grazie anticipatamente

giovi · « **Risposta #1 il:** 21 Lug 2015, 15:35:39 »

E' una questione che riguarda Joomla! v.3?

nofc_nofc · « **Risposta #2 il:** 21 Lug 2015, 15:48:18 »

Beh se non stessi su Joomla bensì su una pagina html normale l'avrei saputo fare

Uso Joomla 3.4.x

tomtomeight · « **Risposta #3 il:** 21 Lug 2015, 15:59:49 »

Citazione da: nofc_nofc - 21 Lug 2015, 15:48:18

Beh se non stessi su Joomla bensì su una pagina html normale l'avrei saputo fare
Uso Joomla 3.4.x

Come lo avresti fatto? Se lo dici vediamo poi di capire come farlo anche in joomla.

nofc_nofc · « **Risposta #4 il:** 21 Lug 2015, 16:53:57 »

pagina html

Codice: [Seleziona]

<!DOCTYPE html>
<html>
  <head>
    <title>Attribute Animation with SMIL</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
     <svg width="300px" height="100px">
    <path id="color" d="M54.9,69.3l-0.7-6.2h-0.3c-2.7,3.8-8,7.3-14.9,7.3c-9.9,0-14.9-7-14.9-14c0-11.8,10.5-18.3,29.4-18.2v-1
        c0-4-1.1-11.3-11.1-11.3c-4.5,0-9.3,1.4-12.7,3.6l-2-5.9c4-2.6,9.9-4.3,16.1-4.3c14.9,0,18.6,10.2,18.6,20v18.3
        c0,4.2,0.2,8.4,0.8,11.7H54.9z M53.6,44.4c-9.7-0.2-20.7,1.5-20.7,11c0,5.8,3.8,8.5,8.4,8.5c6.4,0,10.4-4,11.8-8.2
        c0.3-0.9,0.5-1.9,0.5-2.8V44.4z"/>
</g>
</svg>
  </body>
</html>

Pagina css

Codice: [Seleziona]

@charset "utf-8";
/* CSS Document */

#color {
    fill: #cd3512;
    fill-opacity: 1;
    stroke: #000000;
    stroke-width: 4;
    stroke-opacity: 1;
    cursor: pointer;
    transition: all 1s ease-in-out;
}
#color:hover{
    fill: #FF0000;
    stroke: #0000FF;
 
    -webkit-transform: scale(1.1) rotate(10deg);
    -moz-transform: scale(1.1) rotate(10deg);
    transform: scale(1.1) rotate(10deg);
 
    -webkit-transform-origin: 500px 60px;
    -moz-transform-origin: 500px 60px;
    transform-origin: 500px 60px;
}

giovi · « **Risposta #5 il:** 21 Lug 2015, 16:57:02 »

la procedura è identica in joomla: incolli il css in un foglio di stile richiamato nel template (solitamente templates/tuotemplate/style.css) ed il codice lo inserisci in un qualunque articolo di joomla dopo aver disattivato l'editor ed i filtri sul codice...

giusebos · « **Risposta #6 il:** 21 Lug 2015, 17:14:11 »

Citazione da: giovi - 21 Lug 2015, 16:57:02

la procedura è identica in joomla: incolli il css in un foglio di stile richiamato nel template (solitamente templates/tuotemplate/style.css) ed il codice lo inserisci in un qualunque articolo di joomla dopo aver disattivato l'editor ed i filtri sul codice...

Ti meriti una medaglia!!

Motivazione:

Volontario di Joomla.it , durante l'arduo compito di spiegare come inserire un codice SVG, con spirito di abnegazione e sacrificio, nonchè sprezzo del pericolo, ne dava giusta e perfetta spiegazione, offrendo a tutti il nobilissimo esempio di un eroico insegnamento.

Naturalmente è uno scherzo, forse il caldo,
con tutta la mia stima e simpatia

nofc_nofc · « **Risposta #7 il:** 21 Lug 2015, 17:20:15 »

ahahahhaha

Allora la procedura va a buon fine se il codice è incorporato, mentre non funziona se il file svg è collegato come immagine:
<img src="images/a.svg" alt="aa"> le modifiche non hanno effetto

nofc_nofc · « **Risposta #8 il:** 22 Lug 2015, 11:03:38 »

Nessuno sa come gestire i css di un'immagine svg?

giovi · « **Risposta #9 il:** 22 Lug 2015, 13:00:18 »

Aspè, mi sto gongolando per la medaglia che ho vinto

La questione è sempre la stessa: in html come avresti fatto? Fai lo stesso su Joomla.. è sempre codice, non stregoneria!

nofc_nofc · « **Risposta #10 il:** 22 Lug 2015, 13:51:08 »

Non lo so fare

se nel codice html richiamo il file svg tramite img non riesco a farlo interagire col css esterno. Qualcuno sa come fare?

giovi · « **Risposta #11 il:** 22 Lug 2015, 14:17:21 »

Puoi porre questa domanda su un forum relativo all'html. Qui superiamo solo Joomla!
Quando avrai scoperto come implementarlo in html, se hai difficoltà, ti aiuteremo a riportare tutto in joomla

Antonio Farella · « **Risposta #12 il:** 22 Lug 2015, 14:40:56 »

Citazione da: nofc_nofc - 22 Lug 2015, 13:51:08

Non lo so fare se nel codice html richiamo il file svg tramite img non riesco a farlo interagire col css esterno. Qualcuno sa come fare?

Anche se non ho mai avuto a che fare con i file .svg provo lo stesso ad aiutarti, se tu richiami il file tramite

Codice: [Seleziona]

<img src=....ecc..>

inserendo naturalmente il tutto in articolo o modulo html di joomla puoi dare una classe al tag img

Codice: [Seleziona]

<img class="mio" src=....ecc..>
e inserire sempre nell'articolo lo stile all'interno dei tag <style>

Es.

Codice: [Seleziona]

<style>
.mio{
fill: #cd3512;    fill-opacity: 1;    stroke: #000000;    stroke-width: 4;    stroke-opacity: 1;    cursor: pointer;    transition: all 1s ease-in-out;
}
</style>


<img class="mio" src="img.svg" alt="aa">

giovi · « **Risposta #13 il:** 22 Lug 2015, 15:09:55 »

Mi sa che devo cedere la medaglia a qualcuno....

nofc_nofc · « **Risposta #14 il:** 22 Lug 2015, 15:10:14 »

Non funziona

L'idea mia era quella di mettere dentro l'svg il link al theme.css oppure direttamente lo stile in modo da essere tutto incorporato, ma anche qui non ci sono riuscito. Siccome l'svg è probabilmente un formato per il futuro, sarebbe interessante che qualcuno esperto in materia facesse una guida (la butto lì) ^^

giusebos · « **Risposta #15 il:** 22 Lug 2015, 15:12:58 »

Citazione da: giovi - 22 Lug 2015, 15:09:55

Mi sa che devo cedere la medaglia a qualcuno....

no non credo.

tomtomeight · « **Risposta #16 il:** 22 Lug 2015, 15:27:29 »

Citazione da: nofc_nofc - 21 Lug 2015, 15:48:18

Beh se non stessi su Joomla bensì su una pagina html normale l'avrei saputo fare

A quanto pare non è così!

Citazione da: nofc_nofc - 22 Lug 2015, 13:51:08

Non lo so fare se nel codice html richiamo il file svg tramite img non riesco a farlo interagire col css esterno. Qualcuno sa come fare?

nofc_nofc · « **Risposta #17 il:** 22 Lug 2015, 15:46:22 »

Possiamo concentrarci sulla risoluzione del problema?

Allora c'è una pagina html semplice:

Codice: [Seleziona]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prova SVG</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>

<body>
<h1>Prova SVG</h1>
<p><img src="a.svg" alt="documento svg"/></p>
</body>
</html>

Un file a.svg

Codice: [Seleziona]

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stile.css" type="text/css"?> 

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 55.7 56.1" enable-background="new 0 0 55.7 56.1" xml:space="preserve">
 
<g id="aaabbb">
    <path id="aaa" class="aaa" d="M8.3,40.6c0.1-1.2,0.2-3,0.2-4.6V14.3h3.8v11.3h0.1c1.4-2,3.8-3.3,7.2-3.3c5.2,0,8.9,3.7,8.9,9.2
        c0,6.4-4.8,9.6-9.5,9.6c-3.1,0-5.5-1-7.1-3.4h-0.1l-0.2,3H8.3z M12.3,33.4c0,0.4,0.1,0.8,0.2,1.2c0.7,2.3,3,3.8,5.8,3.8
        c4,0,6.4-2.8,6.4-6.9c0-3.6-2.2-6.7-6.3-6.7c-2.6,0-5.1,1.5-5.8,4c-0.1,0.4-0.2,0.8-0.2,1.3V33.4z"/>
    <path id="bbb" class="bbb" d="M45,40.6l-0.3-2.3h-0.1c-1.2,1.4-3.4,2.7-6.5,2.7c-4.3,0-6.5-2.6-6.5-5.1c0-4.3,4.5-6.7,12.7-6.7v-0.4
        c0-1.5-0.5-4.1-4.8-4.1c-2,0-4,0.5-5.5,1.3l-0.9-2.1c1.7-1,4.3-1.6,6.9-1.6c6.5,0,8,3.7,8,7.3v6.7c0,1.6,0.1,3.1,0.3,4.3H45z
         M44.4,31.4c-4.2-0.1-8.9,0.6-8.9,4c0,2.1,1.7,3.1,3.6,3.1c2.7,0,4.5-1.5,5.1-3c0.1-0.3,0.2-0.7,0.2-1V31.4z"/>
</g>
</svg>

E un foglio di stile esterno stile.css:

Codice: [Seleziona]

@charset "utf-8";
/* CSS Document */

#aaabbb {
stroke:black;
fill:red;
stroke-width:5
}

.aaabbb {
stroke:black;
fill:red;
stroke-width:5
}

Cosa è sbagliato?

maicolstaip · « **Risposta #18 il:** 22 Lug 2015, 16:01:13 »

Prova a mettere l'url assoluta

Citazione

Siccome l'svg è probabilmente un formato per il futuro,

Sono 10 anni che lo leggo

xplosion · « **Risposta #19 il:** 22 Lug 2015, 16:03:49 »

Potresti dare un'occhiata alle raccomandazioni ufficiali W3C