Autore Topic: Gestire SVG con i CSS (Letto 5139 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

nofc_nofc · « **Risposta #20 il:** 22 Lug 2015, 16:12:36 »

L'url assoluta dove?

Sto facendo le prove con Xampp e Dreamviewer e tutti e tre i file stanno in'unica cartella.
Un ottimo sito di riferimento è questo: https://css-tricks.com/using-svg/

giovi · « **Risposta #21 il:** 22 Lug 2015, 17:15:29 »

Continuo a non capire cosa c'entri tutto ciò con Joomla 3... quantomeno spostate la discussione in un'altra sezione visto chenofc_nofc non ci ha voluti degnare di questa cortesia dal principio...

nofc_nofc · « **Risposta #22 il:** 22 Lug 2015, 17:35:21 »

Ma è un forum per trovare risposte oppure per parlarsi addosso?
Mettiamo i puntini sulle i.

@giovi: mi sono 'degnato' di spiegare il motivo, al massimo puoi rimproverarmi che forse mi sono spiegato male nel terzo post. Ho scritto nella sezione di Joomla poiché sto collegando questo file svg su Joomla e non sapevo se ci fossero regole particolari rispetto un html normale. E credo che comunque a qualcuno possa servire avere particolari informazioni su questo tipo di file perché, checché @maicolstaip ne senta parlare da ben dieci anni, molti template lo usano e quindi va studiato a prescindere.
Utilissimo anche il commento di @tomtomeight, cambiare le proprietà del file svg tramite css lo so fare se questo è integrato al codice, mentre se è richiamato come oggetto no, e chiedevo delucidazioni circa questo caso; per non parlare di @giusebos, il cui nome appare assieme a "instancabile" ma bisogna vedere riguardo cosa...

Detto questo non proseguo questo post dato che non ho trovato la serietà che cercavo.

giusebos · « **Risposta #23 il:** 22 Lug 2015, 17:39:23 »

hai ragione: io sono instancabile nel consigliare di imparare ad usare il tasto cerca

https://www.google.it/?gws_rd=ssl#q=inserire+svg+in+joomla+site:forum.joomla.it

nofc_nofc · « **Risposta #24 il:** 22 Lug 2015, 17:45:55 »

Se uno chiede è perché ha già cercato senza risultati. E cerca qualcuno che -essendoci passato- magari conosce la risposta. Mi Consigli di usare il tasto cerca? O sei un lobbista della Google e quindi stai facendo il tuo lavoro, oppure grazie lo stesso, lo sto già continuando a fare io ... ALTROVE

giusebos · « **Risposta #25 il:** 22 Lug 2015, 17:49:45 »

agggglia come siamo seri.

scusa l'OT, ma quanto pagano per diventare lobbista di google?

giovi · « **Risposta #26 il:** 22 Lug 2015, 18:03:40 »

Codice: [Seleziona]

Ho scritto nella sezione di Joomla poiché sto collegando questo file svg su Joomla e non sapevo se ci fossero regole particolari rispetto un html normale.

Infatti non ci sono regole particolari, sei tu che non riesci a far funzionare l'svg neanche sull'html "normale"...

Codice: [Seleziona]

E credo che comunque a qualcuno possa servire avere particolari informazioni su questo tipo di file perché, checché @maicolstaip ne senta parlare da ben dieci anni, molti template lo usano e quindi va studiato a prescindere.

Credo che anche Maicolstaip da buon programmatore possa confermarti he una persona furba cercherà queste informazioni su un forum che tratta l'svg o l'html in generale e non all'interno di una community dedicata ad un cms...

Spero che troverai comunque una risposta al tuo quesito (quando inizierai a cercarla in luoghi più indicati)

Antonio Farella · « **Risposta #27 il:** 22 Lug 2015, 21:37:44 »

Citazione da: nofc_nofc - 22 Lug 2015, 16:12:36

L'url assoluta dove?
Sto facendo le prove con Xampp e Dreamviewer e tutti e tre i file stanno in'unica cartella.
Un ottimo sito di riferimento è questo: https://css-tricks.com/using-svg/

Bene nofc nella pagina che hai linkato c'è la soluzione al tuo problema, come ho scritto prima puoi dare una classe css al tag <img> oppure creare un div o quello che ti pare, assegnare una classe a questo div e poi sul css gli dai come backgraund l'immagine svg oltre a tutti glli altri attributi che ti servono.