HTML 그래픽 – fill 속성

SVG fill 속성

fill 속성은 요소의 내부 색상을 설정한다.

여기서는 세 가지 fill 속성을 살펴보자.

• fill – 요소 내부 색상을 설정한다.
• fill-opacity – 요소 내부 색상의 불투명도를 설정한다.
• fill-rule – 도형의 내부를 결정하는 데 사용되는 알고리즘을 설정한다.

SVG fill 속성

fill 속성은 요소 내부의 색상을 정의한다.

fill 속성은 <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, <tspan> SVG 요소와 함께 사용할 수 있다.

fill 속성의 값은 색상 이름, RGB 값 또는 헥스(hex) 값이 될 수 있다.

polygon, rectangle, circle, 그리고 text에 fill 속성을 사용해보자.

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<polygon points="50,10 0,190 100,190" fill="lime" />

<rect width="150" height="100" x="120" y="50" fill="blue" />

<circle r="45" cx="350" cy="100" fill="red" />

<text x="420" y="100" fill="red">I love SVG!</text>

</svg>

코드 설명:

• fill 속성은 요소 내부의 색상을 정의한다.

SVG fill-opacity 속성

fill-opacity 속성은 채우기 색상의 불투명도를 정의한다.

fill-opacity 속성은 <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, <tspan> SVG 요소와 함께 사용할 수 있다.

fill-opacity 속성의 값은 0부터 1까지 (또는 0%부터 100%까지) 이다.

polygon, rectangle, circle, 그리고 text에 fill-opacity 속성을 사용해보자.

<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />

<rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />

<circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />

<text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>

</svg>

SVG fill-rule 속성

fill-rule 속성은 도형의 내부를 결정하는 데 사용되는 알고리즘을 정의한다.

fill-rule 속성은 <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, <tspan> SVG 요소와 함께 사용할 수 있다.

fill-rule 속성의 값은 “nonzero” 또는 “evenodd”가 될 수 있다.

polygon에 “evenodd” 값을 사용하여 fill-rule 속성을 사용해보자.

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />

</svg>

이번에는, polygon에 “nonzero” 값을 사용하여 fill-rule 속성을 사용해보자.

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg&quot;&gt;

<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />

</svg>