SVG 가이드

SVG 요소

SVG 채우기 패턴

SVG 채우기 패턴은 형태를 이미지 패턴으로 채우기 위해 사용됩니다. 이 패턴은 SVG 이미지(형태) 또는 비트맵 이미지로 구성될 수 있습니다. SVG 채우기 패턴은 Photoshop 등에서 익숙한 '재사용'과 같습니다.

채우기 패턴 예제

이것은 간단한 SVG 채우기 패턴 예제입니다：

예제

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1"　x="10"　y="10"　width="20"　height="20"　patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"　style="stroke:　#000000;　fill:　url(#pattern1);"></rect>
</svg>

테스트를 볼래요‹/›

먼저, <defs> 요소 내에서 <pattern> 요소를 정의합니다. 패턴은 circle 요소를 포함합니다. 이 circle 요소는 채우기 패턴으로 사용됩니다.

또한, CSS 속성에서<rect>요소를 선언합니다fill이 요소가 참조<pattern>그style속성의 요소 ID.

또한, <rect> 요소를 선언합니다. 이 요소는 CSS fill 속성에서 스타일 속성의 <pattern> 요소 ID를 참조합니다.

실행 후 이미지 효과:

이제 <pattern> 요소에서 정의된 원이 사각형의 채우기 패턴으로 사용되는 방법을 주목하세요. 또한 원이 왼쪽에서 오른쪽으로, 위에서 아래로 반복적으로 표현되는 것을 주목하세요.

X, Y, 너비, 높이

<pattern> 요소의 x와 y 속성은 패턴이 <pattern> 요소 내에서 시작할 형태로부터의 거리를 정의합니다.

<pattern> 요소의 width와 height 속성은 패턴의 너비와 높이를 정의합니다.

이제부터 시작하는 예제입니다. 그리고x와y설정됩니다 0:

예제

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　　　　　<circle　cx="10"　cy="10"　r="10style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern"2);"　/>
</svg>

테스트를 볼래요‹/›

실행 후 이미지 효과:

주의하시면, 패턴은 지금 원의 중심에서 시작되는지(사각형의 상단과 왼쪽)에 유의해 주세요. 자신의 채우기 패턴을 만들 때,x와y속성 값으로 필요한 효과를 구현할 수 있습니다.

width와height속성이 설정된 패턴의 너비와 높이입니다.

이전 예제에서width,height모두20으로 설정되어 있습니다. 즉, 원의 지름입니다. 따라서 원은 공간 없이 반복됩니다.

이 예제에서, 패턴의 width(너비)는25이 있으며, 아닙니다20. 주의하시면 지금 수평 원 사이에는5픽셀 간격입니다.

이것도 또 다른height설정됩니다25 예제:

아래는 같은 예제이지만 x와 y가 설정되었습니다:10 (<pattern> 요소 내의 원심):

지금, 패턴은 전체 원을 시작하지만 여전히 초과된 수직과 수평 공간이 있습니다.

내포 패턴

채우기 패턴을 내포할 수 있습니다. 이렇게 하면 내부 채우기 패턴을 사용할 수 있습니다. 이는 사각형이 원형으로 채우기 패턴을 사용하는 예제입니다. 원 내부는 사각형으로 채우기 패턴을 사용합니다.

예제

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="innerPattern"　　　　
x="3"　y="3"　width="9" height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect x="0" y="0" width="6" height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern id="outerPattern"　　　　
x="12"　y="12"　width="25" height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10" style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

테스트를 볼래요‹/›

실행 후 이미지 효과:

보시다시피, 외부 사각형은 지름을 채우고, 지름은 사각형으로 채워지고 있습니다.

변환 패턴

표준 SVG 변환 함수를 사용하여 채우기 패턴을 변환할 수 있습니다. 이를 위해 patternTransform 속성을 사용할 수 있습니다. 다음은 SVG 패턴 변환 예제입니다:

예제

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

테스트를 볼래요‹/›

이 예제는 회전된 단순한 패턴을 정의하고, 이 패턴을 사각형의 채우기 패턴으로 사용합니다.35도. 실행 후 이미지 효과:

SVG 흐림 효과 SVG 변환