제7장. SVG Painting

페인팅(Painting)

• 페인팅 대상
  • 대상 객체 : 도형, 텍스트, 패스
  • 페인팅 작업(operation) : fill & stroke
  • 페인팅 방법 : single color, gradient (linear or radial), pattern
• 페인팅 속성의 값 : 예, fill="..."
  • None : non fill
  • currentColor : 현재 색상으로 fill
  • <color> : 지정한 색상
  • <URI> :  미리 정의된 fill 스타일

Fill 속성

• fill-rule = " nonzero | evenodd | inherit "

  예제  

  <g fill="none" stroke="black" stroke-width="3" >     <path d="... 별모양 ..." />    <path d="... 원 2개 - 같은 방향 ..." />    <path d="... 원 2개 - 반대 방향 ..." /> </g>
  * Non-zero winding rule <g  fill-rule="nonzero"  fill="red" stroke="black"  stroke-width="3" >
  * Even-odd rule <g  fill-rule="evenodd"  fill="red" stroke="black"  stroke-width="3" >

• stroke = "페인팅 값(색상)"
• stroke-width = "크기"  : 0 이상 (0 이면 no drawing)
• stroke-linecap = " butt | round | square | inherit "
• stroke-linejoin = "miter  round | bevel | inherit "
• stroke-opacity = "투명도 값"
• stroke-dasharray = "숫자 리스트"

예제

<line  x1="20" x2="80" y1="25" y2="25" fill="none" stroke="black" stroke-width="20" stroke-linecap="butt" /> ...
<path  d="M 20,60 L 50,20 L 80,60"  fill="none" stroke="black" stroke-width="20" stroke-linejoin="miter" /> ...

Visibility 제어

• display = " inline | block | list-item | ... ... | none | inherit "  : CSS 참고
• visibility = " visible | hidden | ... "

마커(Marker)

• path, line, polyline, polygon 의 vertex에 표시하는 심볼 또는 끝 부분 화살표
• <marker> 요소
  • <marker  markerUnits="..."   refX="좌표"  refY="좌표"  orient="..."
                   markerWidth="크기"  markerHeight="크기"  > ...도형 또는 패스... </marker>
  • markerUnits = "strokeWidth | userSpaceOnUse"
  • refX, refY : align 기준점
  • orient = "auto | 각도"
• 스타일로 지정하는 마커 속성
  • marker-start, marker-end, marker-mid : "none | inherit | URI"

  예제

<svg width="4in" height="2in" viewBox="0 0 4000 2000">   <defs>     <marker  id="Triangle"  viewBox="0 0 10 10"          refX="0" refY="5"  markerUnits="strokeWidth"         markerWidth="4" markerHeight="3" orient="auto">         <path d="M 0 0 L 10 5 L 0 10 z" />     </marker>   </defs>   <rect x="10" y="10" width="3980" height="1980"            fill="none" stroke="blue" stroke-width="10" />   <path d="M 1000 750 L 2000 750 L 2500 1250"             fill="none" stroke="black" stroke-width="100"              marker-end="url(#Triangle)" /> </svg>