본문 바로가기
HTML5/SVG

SVG Stroking

by Jundol 2015. 6. 8.

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Stroke Properties

SVG는 다양한 범위의 선긋기 속성을 제공한다. 

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
모든 선긋기 속성은 어떤 종류의 선이든 텍스트 그리고 원같은 요소의 테두리에 적용이 가능하다.

SVG stroke Property
stroke 속성은 색상을 결정한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>


SVG stroke-width Property

stroke-width 속성은 선의 두께를 결정한다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
<>


SVG stroke-dasharray Property
stroke-dasharray 속성은 점선을 표현할 때 사용한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>


출처 W3School.com - SVG - Stroking

http://www.w3schools.com/svg/svg_stroking.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Blur Effects  (6) 2015.06.09
SVG Filters  (4) 2015.06.09
SVG Text  (6) 2015.06.08
SVG Path  (6) 2015.06.08
SVG Polyline  (4) 2015.06.08

댓글