SVG má veľmi chladný a výkonný prvok, ktorý sa volá . Je to koncepčne dosť jednoduché. Nájde ďalší bit SVG kódu, na ktorý odkazuje ID, a klonuje ho cez prvok.
Najzákladnejší prípad použitia by bol: Tento tvar som už raz na stránku nakreslil (-a) a chcem ho nakresliť znova niekde inde. Choďte pre získanie týchto tvarov a znova ich nakreslite.
Túto schopnosť môžeme použiť ako koreňový koncept pre (drumroll!) A celý systém ikon! Všetky tvary, ktoré na stránke plánujeme použiť, môžeme vziať do jedného veľkého bloku SVG. Všetky zabalíme do značky, čo je sémantický spôsob, ako povedať: „Definujeme iba tieto veci, ktoré sa majú neskôr použiť.“ To tiež zabezpečuje, že nebudú render (ale mali by ste tiež sám.display: none;
Funguje to takto:
Tento funky vyzerajúci xlink:hrefatribút odkazuje inde na ID. Toto ID môže byť na ľubovoľnom tvarovom prvku, napríklad na alebo , alebo na skupine prvkov ako a .
Najlepšie zo všetkých v prípade systému ikon, môže to byť na prvku. Okrem toho, že element môže byť sémanticky správny (ikona je symbol, nie?), Môže niesť svoj vlastný atribút viewBox a informácie o prístupnosti, like a tagy. Vďaka tomu je implementácia veľmi ľahká (ako je uvedené vyššie).
Musíte sa teda uistiť, že je to definované niekde inde v dokumente:
Basketball Prezrite si Pen JoDmd od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.