Az SVG-nek van egy nagyon jó és erőteljes eleme, az úgynevezett . Koncepciójában elég egyszerű. Megtalál egy másik SVG kód bitet, amelyre ID hivatkozik, és klónozza át az elem belsejében .
A legalapvetőbb használati eset a következő lenne: Ezeket az alakzatokat már egyszer megrajzoltam az oldalon, és máshol szeretném újból megrajzolni. Menj, szerezd be azokat az alakzat (oka) t, és rajzold újra.
Használhatjuk ezt a képességet a (dobpergés!) És a teljes ikonrendszer gyökérfogalmaként! Az oldalon felhasználni kívánt összes alakzatot egyetlen nagy SVG-blokkban vehetjük fel. Mindet egy címkébe csomagoljuk, amely szemantikus módon azt mondja: "Csak meghatározzuk ezeket a dolgokat, amelyek később felhasználhatók." Azt is teszi meg róla, hogy nem jelennek meg (de akkor is display: none;a maga.
Ez így működik:
Ez a funky kinézetű xlink:hrefattribútum máshol azonosítóra hivatkozik. Ez az azonosító lehet bármilyen alakú elemen, például egy vagy , vagy lehet olyan elemcsoporton, mint az a .
Ami a legjobb az ikonrendszer esetében, az egy elemen lehet. Amellett, hogy szemantikailag helyes (az ikon szimbólum, nem?), Az elem hordozhatja a saját viewBox attribútumát és az akadálymentességet, például a like-okat és a címkéket is. Ez nagyon egyszerűvé teszi a megvalósítást (a fentiek szerint).
Tehát csak meg kell győződnie arról, hogy ez valahol máshol van megadva a dokumentumban:
Basketball Lásd Chris Coyier (@chriscoyier) Pen JoDmd-jét a CodePen-en.