Cautare in site

Articol

Personalizarea unei imagini SVG cu ajutorul regulilor de stil si tranzitiilor CSS

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.

svg-icon

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


One Comment

  1. Luminita
    added on 12 feb., 2020
    Răspunde

    Foarte bun articol!

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.