SVG rect

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

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

SVG 모양

SVG는 개발자들을 위해 미리 정의된 모양 요소들이 몇가지 있다.

• 직사각형 <rect>

• 원 <circle>

• 타원 <ellipse>

• 선 <line>

• 폴리라인 <polyline>

• 다각형 <polygon>

• 연결형 <path>

챕터를 따라오면 각 요소를 설명할 것이며, rect요소부터 시작하도록 한다.

SVG 직사각형 - <rect>

예제1

<rect> 요소는 직사각형과 직사각형 모양의 변화를 정의하는데 사용된다.

SVG 코드

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

코드 설명

• <rect>태그의 width 와 height 속성은 직사각형의 width,height 를 정의한다.
• style 속성은 직사각형의 CSS 값을 정의할 수 있다.
• CSS의 fill 속성은 직사각형내의 색상을 지정한다.
• CSS의 stroke-width 속성은 직사각형 테두리의 width를 정의한다.
• CSS의 stroke 속성은 직사각형 테두리의 색상을 정의한다.

예제 2

SVG 코드

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

코드 설명

• X 요소는 직사각형의 왼쪽 위치를 지정한다. (e.g. x="50" 직사각형의 왼쪽 마진을 50px을 둔다.)
  
• Y 요소는 직사각형의 상단 위치를 지정한다. (e.g. y="20" 직사각형의 윗쪽 마진을 20px을 둔다.)
• CSS의 fill-opacity 속성은 직사각형의 안쪽 색상의 투명도를 설정한다. (허용 범위 : 0 ~ 1)
• CSS의 stroke-opacity 속성은 stroke 색상의 투명도를 조정한다. (허용 범위 : 0 ~1)

예제 3

모든 요소에 투명도 설정하기

SVG 코드

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

코드 설명

• CSS의 opacity 속성은 모든 요소의 투명도 값을 설정한다. (허용 범위 : 0 ~ 1)

예제 4

마지막 예제 각 모시러가 둥근 사각형.

SVG 코드

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

코드 설명

• rx와 ry 요소는 직사각형 모서리의 둥근정도를 설정한다.

출처 : W3SCHOOL.COM - SVG - Rectanle

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