13: СВГ као систем икона - елемент `усе` - ЦСС-трикови

Anonim

СВГ има врло кул и моћан елемент тзв . Концепт је прилично једноставан. Проналази још један бит СВГ кода на који се позива ИД и клонира га унутар елемента.

Најосновнији случај употребе био би: Већ сам једном нацртао ове облике на страници и желим да их нацртам поново негде другде. Иди узми тај облик (облике) и нацртај га поново.

Ту способност можемо користити као основни концепт (друмролл!) И целог система икона! У једном великом СВГ блоку можемо узети све облике које намеравамо да користимо на страници. Све ћемо их умотати у ознаку која је семантички начин да кажемо „Ми само дефинишемо ове ствари за касније коришћење.“ Такође, чини сигурни да неће учинити (али треба да сама.display: none;

Ради овако:

 

Тај xlink:hrefатрибут необичног изгледа референцује на неки други ИД. Тај ИД може бити на било којем елементу облика, попут или , или на групи елемената попут .

Најбоље од свега у случају система икона, он може бити на елементу. Поред тога што је семантички исправан (икона је симбол, зар не?), Елемент може да носи свој атрибут виевБок и информације о приступачности, попут и ознака. Ово чини имплементацију врло једноставном (као што је горе приказано).

Дакле, само требате осигурати да је ово дефинисано негде другде у документу:

 Basketball 

Погледајте Пен ЈоДмд Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.