fill and stroke
도형의 색을 칠하거나 라인의 굵기등을 변경하기 위해 CSS 스타일을 이용할 수도 있지만 SVG에는 기본적인 그리기 속성을 포함하고 있다.
painting#
fill과 stroke은 도형과 선의 기본색을 지정한다.
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 와 같은 유사 클래스를 이용해 동적인 스타일을 적용할 수도 있다.
별도의 스타일 파일로 스타일을 분리해서 사용할 수도 있다.
style.css
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
^주의
위 코드는 라이브 코드 특성상 React JSX 포멧을 따르지만 기본적으로 아래와 같이 작성한다.