В SVG есть очень крутой и мощный элемент под названием . Концепция довольно проста. Он находит еще один бит SVG-кода, на который ссылается идентификатор, и клонирует его внутри элемента.
Самый простой вариант использования: я уже нарисовал эту фигуру (фигуры) один раз на странице и хочу снова нарисовать ее где-нибудь еще. Возьмите эту форму (ы) и нарисуйте ее снова.
Мы можем использовать эту способность как основную концепцию для (барабанной дроби!) И всей системы значков! Мы можем взять все формы, которые мы собираемся использовать на странице, в один большой блок SVG. Мы заключим их все в тег, который является семантическим способом сказать: «Мы просто определяем эти вещи, чтобы использовать их позже». Это также гарантирует , что они не будут оказывать (но вы должны также сам.display: none;
Это работает так:
Этот забавный xlink:hrefатрибут ссылается на идентификатор в другом месте. Этот идентификатор может быть на любом элементе фигуры, например, или , или в группе элементов, например .
Лучше всего в случае системы значков, это может быть элемент. В дополнение к правильным семантически (значок является символом, нет?), То элемент может нести свой собственный атрибут Viewbox и доступность информации, как и метки. Это очень упрощает реализацию (как показано выше).
Поэтому вам просто нужно убедиться, что это определено где-то еще в документе:
Basketball См. Pen JoDmd Криса Койера (@chriscoyier) на CodePen.