SVG fill 속성

SVG 형태의 fill은 그 외곽 내의 형태의 색상을 정의합니다. 다시 말해, SVG 형태의 표면입니다.填充은 SVG 형태에 설정할 수 있는 기본 SVG CSS 속성 중 하나입니다.

填充 예제

SVG 형태의填充은 형태 외곽 내의填充입니다. 이는 SVG填充 예제입니다：

<svg width="500" height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="가림선: none;　填充:　#0000ff;"　/></svg>

이 예제는 푸른색(#0000ff)으로填充된 색상만 가림선이 없는 원을 정의합니다. 아래는 생성된 이미지입니다：

填充과 가림선 예제

SVG 가림선과填充 색상을 SVG 형태로 조합할 수 있습니다. 이는 SVG 가림선과填充 예제입니다：

<svg width="500" height="100"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="가림선:　#000066;　填充:　#3333ff;"　/></svg>

이 예제는 깊은 푸른색(#000066)가림선 색상과 가볍게 푸른색(#3333ff)填充색을 정의합니다. 다음은 생성된 이미지입니다：

fill-opacity

SVG CSS 속성 fill-opacity를 사용하여 형태의填充색의 불투명도를 설정합니다. fill-opacity는 0과1之间的数值。值越接近0，填充越透明。 值越接近1fill-opacity 값이1이란 것을 의미합니다. 불투명도 값이

이는 SVG填充 불투명도 fill-opacity 예제, 두 가지 다른(fill-opacity)의 원:

<svg width="500" height="120">
<text　x="22"　y="40">Text　Behind　Shape</text>
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.3;　　"></path>
<circle　cx="120"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.7;　　"></path>
</svg>

이는 생성된 이미지입니다.

주의하세요, 오른쪽 원 뒤의 텍스트는 왼쪽 원 뒤의 텍스트보다 덜 보입니다. 이는 오른쪽 원 fill-opacity는 왼쪽 원보다 높습니다.

fill-rule

fill-rule이 결정하는 복잡한 형태의填充 방식.-rule은 두 가지 다른 값을 취할 수 있습니다. 이 두 가지 값은 다음과 같습니다:

• nonzero

• evenodd

일반적으로, 이 두 가지 값은 형태 내부와 외부의 규칙을 결정합니다. 단순한 내부填充은 원에 대해 매우 간단하지만, 더 복잡한 형태에 대해서는 그렇지 않습니다. 다음 <path> 예제를 보세요:

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule:　nonzero;
　　　　　　></path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style="stroke: #000000;
　　　　　　　　　fill: #6666ff;
　　　　　　　　　fill-rule:　nonzero;"></path>
</svg>

이 두 경로 예제는 각각8줄이 있으며, 각 줄은 사각형으로 그려지며, 더 큰 사각형은 작은 사각형을 포함합니다. 왼쪽 경로에서는 내부 사각형이 왼쪽에서 오른쪽으로(시계 방향) 그려집니다. 오른쪽 경로에서는 내부 사각형이 오른쪽에서 왼쪽으로(반시계 방향) 그려집니다. 이는 fill을 사용합니다.-rule：non-zero 그림의 결과 이미지

그렇게 보면, nonzero 규칙은 형태 내부의 사각형 방향과 사각형 형태에 따라 내부 사각형을 그립니다. 점이 형태 내부인지 외부인지를 결정하는 nonzero 규칙은 다음과 같습니다:

점에서 무한远处까지 직선을 그립니다(광선). 형태 내의 경로가 이 광선을穿過할 때마다, 경로가 왼쪽에서 오른쪽으로 광선을穿過하면,1계산기에 추가합니다; 경로가 오른쪽에서 왼쪽으로 광선을穿過하면, 계산기에서 뺍니다.1모든 광선을穿過하는 경로가 계산되면, 총 계산 수가 0이면 해당 점은 경로 밖으로 간주됩니다. 총 계산 수가 0이 아니면, 점을 경로 내로 간주합니다.

이 경로 예제는 fill을 사용합니다.-rule：evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;" >/path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style="stroke: #000000;
　　　　　　fill: #6666ff;
　　　　　　fill-rule: evenodd;" >/path>
</svg>

실행 후 이미지 효과:

evenodd는 '홀수 짝수'라는 뜻입니다. 이 규칙에 따라, 포인트가 그래픽 내에 있는지 판단하려면, 그 포인트에서 어떤 방향으로든 선을 그리고 그 선과 그래픽 경로의 교점의 개수를 검사합니다. 어떤 방향에서든 포인트에서 무한远处까지 선을 그려줍니다(사선). 경로가 선을 건너는 때마다 카운터를 증가시킵니다. 총 개수가 짝수면 그 포인트는 바깥에 있으며, 총 개수가 홀수면 그 포인트는 형상 내에 위치합니다.