rect
rect 태그는 SVG에서 사각형을 그릴 수 있는 태그이다.
<rect x="0" y="0" rx="10" ry="10" width="100" height="100" fill="red" stroke="blue" stroke-width="10"/>Attribute
- x는 좌표계를 기준으로의 x 값을 말한다.
- y는 좌표계를 기준으로의 y 값을 말한다.
- rx, ry는 사각형 모서리의 radius 값을 말한다.
- width, height는 사각형의 크기를 말한다.
- fill은 사각형의 Background 색을 말한다.
- stroke는 사각형의 border색을 말한다.
- stroke-width는 사각형 border의 넓이를 말한다.
circle
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>Attribute
- cx는 원의 중심점중 x값을 말한다.
- cy는 원의 중심점중 y값을 말한다.
- cx와 cy의 교차점이 해당 circle의 중심점이 된다.
- r은 원의 반지름의 길이를 말한다. cx와 cy의 교차점부터 r의 값으로 circle의 rendering 된다.
Ellipse
<ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="red"></ellipse>Attritube
- cx는 원의 중심점중 x값을 말한다.
- cy는 원의 중심점중 y값을 말한다.
- rx는 원의 가로축 반지름을 말한다.
- ry는 원의 세로축 반지름을 말한다.
Line
<line x1="0" y1="10" x2="30" y2="10" stroke="orange" stroke-width="3"></line>Attribute
- x1, y1은 line의 시작이 되는 점입니다.
- x2, y2는 line의 시작 점부터 x2, y2점까지 그어지는 점입니다.
Polygon
<polygon points="x1,y1 x2,y2, x3,y3 ..." fill="black" stroke="" stroke-width=""></polygon>Attribute
- points는 Polygon을 형성하는 꼭지점의 좌표값인데 위 처럼 총 3개의 점을 찍으면 자동으로 이어지고 끝점과 시작점은 지정하지 않아도 자동으로 이어준다.
polyline
<polyline points="100,100 130,100 130,130 160,130 160,160" fill="transparent" stroke="black" stroke-width="2"></polyline>Attribute
- points는 Polygon의 points랑 비슷하다 다만 Polygon은 다각형 도형을 만들때 사용하고 polyline은 여러개의 점을 이을때 사용한다.
