SVG: llä on erittäin siisti ja tehokas elementti nimeltä . Se on melko yksinkertainen. Se löytää toisen SVG-koodin, johon ID viittaa, ja kloonaa sen elementin sisälle .
Perusteellisinta käyttötapaus olisi: Olen jo piirtänyt tämän muodon (sivut) kerran sivulle ja haluan piirtää sen uudelleen jonnekin muualle. Mene hakemaan se muoto (t) ja piirrä se uudelleen.
Voimme käyttää tätä kykyä juurikonseptina (drumroll!) Ja koko kuvakejärjestelmälle! Voimme ottaa kaikki sivulla käytettävät muodot yhteen suureen SVG-lohkoon. Käärimme ne kaikki tunnisteeseen, joka on semanttinen tapa sanoa "Me vain määritämme nämä asiat, joita voidaan käyttää myöhemmin". Se tekee myös varma, että ne eivät tee (mutta sinun pitäisi myös itse.display: none;
Se toimii näin:
Tämä funky-näköinen xlink:hrefominaisuus viittaa ID: hen muualla. Tuo tunnus voi olla missä tahansa muotoelementissä, kuten a tai , tai se voi olla elementtiryhmässä, kuten a .
Mikä parasta, jos kyseessä on ikonijärjestelmä, se voi olla elementillä. Sen lisäksi, että elementti on semanttisesti oikea (kuvake on symboli, eikö?), Elementillä voi olla oma viewBox-määritteensä ja saavutettavuustietonsa, kuten ja tagit. Tämä tekee toteutuksesta erittäin helppoa (kuten yllä on esitetty).
Joten sinun tarvitsee vain varmistaa, että tämä on määritelty muualla asiakirjassa:
Basketball Katso Chris Coyierin (@chriscoyier) Pen JoDmd CodePen -palvelusta.