Элемент <pattern> SVG

SVG может использовать элемент <pattern> для определения узора. Он используется для заливки графических элементов с помощью повторения.

Для заливки или обводки объекта с использованием предопределенных графиков используется элемент pattern. Элемент pattern позволяет предопределенным графикам повторяться (или тянуться) с фиксированным интервалом по осям x и y, чтобы покрыть область, подлежащую покраске. Сначала с помощью элемента pattern определяют узор, а затем на заданном графическом элементе с помощью атрибута fill или атрибута stroke указывают узор для заливки или обводки.

<svg　width="120"　height="120"　viewBox="0　0　120　120"　　　　
xmlns="http://www.w3.org/2000/svg"　version="1.1"　　　　
xmlns:xlink="http://www.w3.org/1999/xlink">　　　　
<defs>　　　　
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">　　　　
<polygon points="5,0 10,10 0,10"/>　　　　
　　　　</pattern>　　　　
</defs>　　　　
<circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>　　　　
</svg>

Результат выполнения будет выглядеть так:

Объяснение использования

• Атрибут id в <pattern> определяет уникальное имя шаблона.

• patternUnits используется для определения свойств x, y, ширины и высоты.

• cx и cy — это координаты x и y осей координат рамки шаблона.