HTML 그래픽 – stroke 속성

SVG stroke 속성

stroke 속성은 요소 주변에 그려지는 선의 색상을 설정한다.

여기서 여섯 가지 stroke 속성을 살펴보자.

• stroke – 요소 주변 선의 색상을 설정한다.
• stroke-width – 요소 주변 선의 너비를 설정한다.
• stroke-opacity – 요소 주변 선 색상의 불투명도를 설정한다.
• stroke-linecap – 선 또는 열린 경로의 끝 모양을 설정한다.
• stroke-dasharray – 선을 점선으로 표시하도록 설정한다.
• stroke-linejoin – 두 선이 만나는 모서리 모양을 설정한다.

SVG stroke 속성

stroke 속성은 요소 외곽선의 색상을 정의한다.

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

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

여기서는 polygon, rectangle, circle, 그리고 text의 외곽선 색상을 설정하기 위해 stroke 속성을 사용한다.

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

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

<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red"></rect>

<circle r="45" cx="350" cy="100" fill="pink" stroke="blue"></circle>

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

</svg>

코드 설명

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

여기서는 세 개의 선 색상을 정의하기 위해 stroke 속성을 사용한다.

<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg"&gt;

<g fill="none">

<path stroke="red" d="M5 20 l215 0"></path>

<path stroke="green" d="M5 40 l215 0"></path>

<path stroke="blue" d="M5 60 l215 0"></path>

</g>

</svg>

SVG stroke-width 속성

stroke-width 속성은 선의 너비를 정의한다.

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

여기서는 polygon, rectangle, circle, 그리고 text의 외곽선 너비를 설정하기 위해 stroke-width 속성을 사용한다.

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

<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4"></polygon>

<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4"></rect>

<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4"></circle>

<text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>

</svg>

여기서는 세 개의 선 너비를 설정하기 위해 stroke-width 속성을 사용한다.

<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg"&gt;

<g fill="none" stroke="red">

<path stroke-width="2" d="M5 20 l215 0"></path>

<path stroke-width="4" d="M5 40 l215 0"></path>

<path stroke-width="6" d="M5 60 l215 0"></path>

</g>

</svg>