UX·UI - FrontEnd Dev. Story

프론트엔드/CSS

[CSS] SVG 태그 <rect> 태그 / 사각형태그 / 사각형만들기 / 렉트태그

클로이겅쥬 2020. 1. 3. 15:48
반응형

1. SVG 이용해서 <rect> 사각형 태그 그리기

<svg height="210" width="500">
     <rect x="150" y="100" width="300" height="100" style="fill:#dddddd;stroke:purple;stroke-width:3" />
</svg>

 

 

x 와 y사각형의 왼쪽 위쪽 위치를 정의 ( X축 150픽셀에서 사각형 만들어라./ Y축 100픽셀에서 사각형 만들어라.)

width: 가로 픽셀 넓이

height: 세로 픽셀 길이

 

 

 

 

 


2. SVG 이용해서 <rect> 모서리 둥근 사각형 태그 그리기

 

<svg height="210" width="500">
     <rect x="150" y="100" rx="20" ry="20" width="300" height="100" style="fill:#dddddd;stroke:purple;stroke-width:3" /> </svg>

 

 

rx와 ry는 사각형 모서리의 둥글기를 정의합니다.

 

반응형