Skip to main content

fill and stroke

도형의 색을 칠하거나 라인의 굵기등을 변경하기 위해 CSS 스타일을 이용할 수도 있지만 SVG에는 기본적인 그리기 속성을 포함하고 있다.

painting#

fillstroke은 도형과 선의 기본색을 지정한다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

stroke#

색깔외에도 stroke-width, stroke-linecap과 같은 속성이 있다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

stroke-linejoin속성은 두 선을 연결하는 연결부위를 그리는 방법을 제어한다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

stroke-dasharray속성은 점선을 표시하기 위해 사용한다. 이 속성의 값은 반드시 컴마로 구분되어야한다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

CSS 스타일#

svg에 CSS를 통해 스타일을 적용할 수 있다. 모든 속성을 CSS로 적용할 수 있는건 아니다. :hover 와 같은 유사 클래스를 이용해 동적인 스타일을 적용할 수도 있다.

SVG 사양 참조

별도의 스타일 파일로 스타일을 분리해서 사용할 수도 있다.

style.css
#MyRect:hover {
stroke: black;
fill: blue;
}
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
주의

위 코드는 라이브 코드 특성상 React JSX 포멧을 따르지만 기본적으로 아래와 같이 작성한다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="80" height="50" y="10" width="50" style="stroke: black; fill: red" />
<rect x="10" height="50" y="10" width="50" id="MyRect" />
</svg>