svg
svg
확장가능한 벡터그래픽 웹용 벡터기반 그래픽을 정의하는데 사용
/벡터: ctrl+scroll해도 깨짐현상없음
모양기반 스크립트및 css통해 수정가능
선(line) : 두 점을 연결하는 선을 만드는 데 사용된다.
<body>
<svg width="300" height="200" style="border: 3px solid black;">
<line x1="50" y1 ="0" x2 = "100" y2 ="350"
stroke="orange" stroke-width = "5">
</line>
</svg>
</body>
원 : 중심점과 반지름을 기준으로 원을 그리는 데 사용된다.
<body>
<svg width="300" height="200" style="border: 3px solid black;">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"> </circle>
</svg>
</body>
cx
원의 중심에서 x축 좌표
cy
원의 중심에서 y축 좌표
r
원의 반지름.0보다 작거나 같은 값은 원의 렌더링을 비활성화한다
rect : 직사각형의 위치, 폭, 높이를 지정한다 또한, 모서리를 둥글게 할 수 있다.
<body>
<svg width="300" height="200" style="border: 3px solid black;">
<rect x="10" y="10" width="140" height="80" style="stroke:rgb(0,0,255);
stroke-width: 3; fill:rgb(255,255,0);"></rect>
</svg>
</body>
x
x좌표 ->
y
y좌표 ->
width
넓이
height
높이
rect으로 모서리둥글게하기
<body>
<svg width="300" height="200" style="border: 3px solid black;">
<rect x="10" y="50" rx="100" ry="25" width="100" height = "80"
style="stroke: black; stroke-width: 5px; fill:red; opacity: 0.5;">
</rect><!--opacity값이 낮아질수록 투명-->
</svg>
</body>
x
x좌표 ->
y
y좌표 ->
width
넓이
height
높이
rx
수평 모서리 반지름.기본값: auto
ry
수직 모서리 반지름.기본값: auto