Autor Zpráva
emissary
Profil
Zdravím vás,

chcem sa spýtať na pridávanie ikoniek. Ide o to, že na badoo.com používajú celkom sympatické ikonky. Chcel by som pochopiť akým spôsobom je tam táto ikonka pridaná. Je to SVG obrázok, ale vôbec nerozumiem tomu spracovaniu.





<div class="photo-counter"> 
  <i class="icon icon--white">
    <svg class="icon-svg">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-camera-contour"></use>
    </svg>
  </i> 
  <span class="small">3</span>
</div>

Čo je to za "tag" <use></use>. Vôbec nerozumiem ani tomu linku xlink:href="#icon-camera-contour" ktoré odkazuje na nejake IDčko, ktoré sa tam ani nenachádza. Ak bude niekto taky zdatný a bude mi vedieť vysvetliť túto technológiu, tak budem moc rád.

Čo sa týka CSS, tak:

.photo-counter {
    position: absolute;
    top: 158px;
    left: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font: 1em/1.28572 'FS Albert Pro Web Bold',Helvetica,Arial,sans-serif;
}

.icon--white {
    fill: #fff;
}

.icon {
    transition: color .2s,fill .2s,background .2s,box-shadow .2s,opacity .2s;
    width: 16px;
    height: 16px;
    display: inline-block;
}

i {
    font-style: normal;
}

.icon-svg {
    display: block;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit;
    background: inherit;
    fill: inherit;
    pointer-events: none;
    box-sizing: border-box;
}

.icon-svg > use {
    transition: opacity .2s;
}

To je všetko čo som z toho vytiahol.
Chamurappi
Profil
Reaguji na emissaryho:
ktoré odkazuje na nejake IDčko, ktoré sa tam ani nenachádza
Určitě se tam nenachází? Řekl bych, že AJAXem natahují do stránky tento kus SVG.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0