본문 바로가기
HTML5/SVG

SVG rect

by Jundol 2015. 6. 8.

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

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






SVG 모양

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

  • 직사각형 <rect>

  • 원 <circle>

  • 타원 <ellipse>

  • 선 <line>

  • 폴리라인 <polyline>

  • 다각형 <polygon>

  • 연결형 <path>

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

SVG 직사각형 - <rect>

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

Sorry, your browser does not support inline SVG.

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
Sorry, your browser does not support inline SVG.

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
모든 요소에 투명도 설정하기
Sorry, your browser does not support inline SVG.

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
마지막 예제 각 모시러가 둥근 사각형.
Sorry, your browser does not support inline SVG.


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

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

SVG Line  (6) 2015.06.08
SVG Ellipse  (6) 2015.06.08
SVG Circle  (182) 2015.06.08
SVG in HTML  (263) 2015.06.08
웹기반 편집기 개발을 위한 SVG 정리  (263) 2015.06.08

댓글