svg <pattern> 요소

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>

실행 결과는 다음과 같습니다:

용법 설명

• <pattern>의 id 속성은 패턴의 유일한 이름을 정의합니다.

• patternUnits는 x, y, 너비 및 높이 속성을 정의합니다.

• cx와 cy는 패턴 경계 사각형의 x와 y 축 좌표입니다.