<?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>Beh se non stessi su Joomla bensì su una pagina html normale l'avrei saputo fare :P
Uso Joomla 3.4.x
<!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>@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;
}
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...
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?
<img src=....ecc..><img class="mio" src=....ecc..><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">
Mi sa che devo cedere la medaglia a qualcuno.... ;)no non credo.
Beh se non stessi su Joomla bensì su una pagina html normale l'avrei saputo fare :P
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?
<!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><?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>@charset "utf-8";
/* CSS Document */
#aaabbb {
stroke:black;
fill:red;
stroke-width:5
}
.aaabbb {
stroke:black;
fill:red;
stroke-width:5
}
Siccome l'svg è probabilmente un formato per il futuro,Sono 10 anni che lo leggo
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. 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...L'url assoluta dove? :D
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/ (https://css-tricks.com/using-svg/) 8)