SVG: 칠하기

>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=394&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=2

 

 

SVG에서는 다음과 같은 방법으로 개체를 칠할 수 있습니다.

solid color : 단색으로 칠합니다.

gradient (linear or radial) : 선형 또는 원형 그라디언트를 적용하여 칠합니다.

pattern : 패턴을 적용하여 칠합니다.

예) 사각형 개체의 채우기에 색깔, 그라디언트, 패턴을 적용했을 때

예) 사각형 개체의 테두리에 색깔, 그라디언트, 패턴을 적용했을 때

Fill 속성

   fill
   fill 속성은 주어진 개체의 안쪽 영역을 칠합니다. 안쪽 영역을 결정하는 기준은 fill-rule 속성값에 의해 
   정해집니다. <paint> 타입의 값을 가지며 초기값은 black입니다.

     <paint> 타입 

       none : 칠하지 않음. 
       currentColor : 현재 지정된 색깔로 칠함. 
       <color> : 지정된 색깔로 칠함. 
       <uri> : 미리 정의된 fill 스타일이 지정된 곳을 가리킴.

     fill-rule
     개체의 안쪽과 바깥쪽 영역을 결정하는데 사용되는 방식을 지정합니다.
     nonzero | evenodd | inherit 값을 가지며 초기값은 nonzero입니다. 

     <참고> nonzero와 evenodd

      fill-opacity
      투명도를 지정합니다. 0.0부터 1.0까지의 값을 가지며, 값이 커질수록 투명해집니다. 
      초기값은 1입니다.

Stroke 속성

     stroke
     개체의 테두리를 칠합니다. <paint> 타입의 값을 가지며 초기값은 none입니다. 
     stroke-width
     테두리 두께를 지정합니다. 값이 0일 경우 칠해지지 않으며, 음수는 사용될 수 없습니다. 
     초기값은 1입니다. 
     stroke-linecap
     패스의 끝 모양을 지정합니다. 개방형 서브 패스의 윤곽선을 그릴 때 사용됩니다.
     butt | round | square | inherit 값을 가지며, 초기값은 butt입니다.

      

     stroke-linejoin
     패스의 모서리 모양을 지정합니다.
     miter | round | bevel | inherit 값을 가지며, 초기값은 miter입니다. 

      

     stroke-mitterlimit
     troke-linejoin에서 miter를 선택했을 경우, 개체의 모서리 한계를 테두리 두께의 몇 배로 제한할 
     것인지를 설정합니다.
     stroke-dasharray
     dash의 패턴과 간격을 설정합니다.
     none | <dasharray> | inherit 값을 가지며, 초기값은 none입니다. 
     stroke-dashoffset
     dash 패턴이 시작하는 길이를 설정합니다.
      <length> | inherit 값을 가지며, 초기값은 0입니다. 
     stroke-opacity
     테두리의 투명도를 지정합니다. 0.0부터 1.0까지의 값을 가지며, 값이 커질수록 투명해집니다. 
     초기값은 1입니다.

Visibility 속성

SVG는 그래픽 요소의 visibility를 조절할 때, display와 visibility를 사용합니다. 그룹 요소에 적용했을 
때 display는 그룹 내의 자식 요소들까지 적용되나 visibility는 적용되지 않습니다.

      display
      값이 none일 때 해당 요소와 자식 요소들이 보이지 않습니다. 
      visibility
      값이 visible일 때 해당 요소가 보이고, hidden 또는 collapse일 때 해당 요소가 보이지 않습니다.

Marker

마커(Marker)는 패스의 끝에 표시하는 화살표 모양의 심볼을 가리킵니다. <marker> 요소를 이용하여 모양을 결정합니다.

     markerWidth : 마커의 너비

     markerHeight : 마커의 높이

     orient : 마커가 회전할 각도

     marker-start : 시작점에 그려질 마커 모양을 정의

     marker-end : 끝점에 그려질 마커 모양을 정의

     marker-mid : 그외 모든 점의 모양을 지정

예제) 패스의 끝 화살표로 삼각형 마커 심볼을 그린 것

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="4in" height="2in"         viewBox="0 0 4000 2000"         xmlns="http://www.w3.org/2000/svg">   <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" />   <desc>Placing an arrowhead at the end of a path.   </desc>   <path d="M 1000 750 L 2000 750 L 2500 1250"            fill="none" stroke="black" stroke-width="100"             marker-end="url(#Triangle)" /> </svg>

SVG 보기 (marker.svg)

※ 위 예제는 W3C 웹 사이트의 SVG 스펙 문서에 사용된 예제입니다.