Personalizarea unei imagini SVG cu ajutorul regulilor de stil si tranzitiilor CSS
In articolele precedente am vazut ce este o imagine vectoriala SVG, cum se poate aceasta obtine si cum putem integra o imagine SVG intr-un document HTML.
Am vazut ca avem posibilitatea de a insera codul XML ce genereaza imaginea SVG direct in pagina HTML. Astfel este foarte usor sa personalizam variile elemente vectoriale ce o compun cu ajutorul regulilor de stil CSS si sa le animam cu ajutorul tranzitiilor.
Schimbarea culorii de umplere a formelor ce compun imaginea SVG
Primul lucru pe care il vom face este sa schimbam culoarea de fundal a iconitei nostre, intervenind asupra culorii de umplere a cercului.
Vedem in codul XML de mai jos ca imaginea SVG este compusa din doua grupuri cu id-ul Layer_1 si Layer_2. In interiorul primului grup gasim cercul ce are deja proprietarea circle fill. Culoarea de umplere deci o putem fie schimba direct de aici cat si prin intermediul unei clase CSS.
<svg width="139px" height="139px"> <g id="Layer_1"> <circle fill="red" cx="69.5" cy="69.5" r="69"/> </g> <g id="Layer_2"> <path fill="#FFFFFF" d="M60.281,55.328c15.415,8.637,22.263,23.684,28.523,39.25c0.221-9.886,1.523-19.296,7.355-27.507 c-1.182,3.731-2.92,7.292-3.516,11.22c-0.539,3.543,0.924,4.651,4.239,3.725c7.243-2.023,11.667-6.69,13.396-14.031 c1.104-4.684,0.943-9.646,3.17-14.085c0.893-1.781-0.083-2.301-1.764-2.5c-8.199-0.971-17.271,4.536-20.365,12.509 c-1.887,4.864-2.526,9.982-2.965,15.146c-0.125,1.486,0.629,3.339-1.67,4.661c-2.998-8.971-5.551-17.951-10.97-25.69 c-5.722-8.173-13.468-12.852-23.379-13.518c-9.449-0.636-18.091,2.315-27.122,6.396c7.662,4.406,9.324,6.081,13.675,13.315 c1.459,2.426,2.862,4.895,4.458,7.229c8.087,11.827,18.406,15.97,32.437,13.106c5.059-1.032,5.641-2.04,3.172-6.732 C74.329,69.028,68.343,61.333,60.281,55.328z"/> </g> </svg>
Pentru a personaliza culoarea prin intermediul CSS nu vom folosi proprietatea background-color cum ar fi normal ci proprietatea fill. Astfel vom scrie clasa CSS de mai jos pe care o vom aplica cercului:
.circle-svg { fill: #BDAECF; }
<circle fill="red" class="circle-svg" cx="69.5" cy="69.5" r="69"/>
Linkarea unei imagini SVG
Putem avea nevoie ca imaginea / iconita nostra in format SVG sa fie un link. Exista mai multe modalitati de linkare a unei imagini SVG dar cu siguranta cea mai simpla este prin intermediul tag-ului HTML a href. Vom plasa deci imaginea in interiorul acestui tag:
<a href="#"> <svg> …………… </svg> </a>
Animarea imaginii SVG
Acum ca imaginea nostra este un link putem sa ii aplicam varii animatii ca schimbarea culorii elementelor ce o compun in faza de hover (faza link-ului cand se trece mouse-ul deasupra) sau tranzitii.
Mai sus am aplicat clasa .circle-svg cercului. Acum pornind de la aceasta regula vom defini o noua culoare de umplere pentru faza de hover a cercului.
.circle-svg:hover { fill: #AF2B83; }
Ceea ce observam este ca in acest caz comportamentul de hover il vom avea numai cand suntem cu mouse-ul desupra cercului si nu si asupra frunzelor. DEMO
Ceea ce vom face pentru a obtine schimbarea culorii cercului in faza de hover pe toata suprafata imaginii este sa:
– definim o clasa pe care o vom aplica intregii imagini – clasa o vom numi .icon-svg;
– acestei clase ii vom aplica faza de hover si in aceasta faza ii vom da comportamentul clasei pe care am creat-o anterior pentru schimbarea culorii cercului pe care am numit-o .circle-svg.
.icon-svg:hover .circle-svg { fill: #AF2B83; }
<svg width="139px" height="139px" class="icon-svg">
Acum am obtinut comportamentul dorit pe toata suprafata imaginii. DEMO
Aplicarea tranzitiilor CSS asupra unei imagini SVG
Acum ca imaginea noastra isi schimba culoarea de fundal in faza de hover putem interveni si asupra tranzitiei de la o culoare la alta. Vom aplica tranzitia CSS asupra clasei .circle-svg alegand o tranzitie liniara de 1 secunda scriind-o pentru toate browser-ele.
.circle-svg { fill: #BDAECF; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; }
AICI POATE FI GASITA PAGINA DEMO COMPLETA
Bun
Foarte bun articol!