Элемент SVG позволяет нам определять шаблоны внутри нашей разметки SVG и использовать эти шаблоны как файл fill. Базовый процесс создания шаблонов выглядит примерно так:
- Определите
внутреннюю часть SVG - Определите формы внутри узора
- Используйте формы
- Создайте новую форму и залейте ее узором
Это набор простых фигур SVG, используемых в качестве шаблонов. Этот список может со временем расти, но идея состоит не столько в том, чтобы иметь исчерпывающую коллекцию, сколько в том, чтобы иметь удобный синтаксис в качестве отправной точки для создания новых и интересных шаблонов.
Мы также храним их коллекцию на CodePen.
Круглый узор
Шаблон шахматной доски
Шестиугольник
Кубический узор
Шевронный узор
Если вы хотите поиграть в реальном времени с различными атрибутами узора, чтобы понять, как он работает, попробуйте следующее: