SVG ma bardzo fajny i potężny element o nazwie . Koncepcja jest dość prosta. Znajduje inny fragment kodu SVG, do którego odwołuje się identyfikator, i klonuje go wewnątrz elementu.
Najbardziej podstawowy przypadek użycia byłby następujący: Już raz narysowałem ten kształt (y) na stronie i chcę narysować go ponownie w innym miejscu. Zdobądź ten kształt i narysuj go ponownie.
Możemy użyć tej zdolności jako głównej koncepcji (drumroll!) I całego systemu ikon! Możemy przyjąć wszystkie kształty, których zamierzamy użyć na stronie, w jednym dużym bloku SVG. Otoczymy je wszystkie tagiem, który jest semantycznym sposobem powiedzenia „Po prostu definiujemy te elementy, których będziemy używać później”. To również sprawia, że na pewno nie odda (ale należy również sama.display: none;
Działa to tak:
Ten dziwnie wyglądający xlink:hrefatrybut odwołuje się do identyfikatora w innym miejscu. Ten identyfikator może znajdować się na dowolnym elemencie kształtu, takim jak a lub , lub może znajdować się na grupie elementów, takich jak a .
Najlepszy ze wszystkich w przypadku systemu ikon może być na elemencie. Oprócz poprawności semantycznej (ikona jest symbolem, nie?), Element może posiadać własny atrybut viewBox i informacje o dostępności, takie jak i tagi. To sprawia, że implementacja jest bardzo łatwa (jak pokazano powyżej).
Musisz więc tylko upewnić się, że jest to zdefiniowane w innym miejscu w dokumencie:
Basketball Zobacz Pen JoDmd autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.