SVG Line

2017-12-15

Line

SVG를 이용하여 선을 그릴 수 있습니다.

속성 이름	개요
x1	x축 시작 좌표 값
y1	y축 시작 좌표 값
x2	x축 끝 좌표 값
y2	y축 끝 좌표 값

stroke(line color)

stroke를 사용하여 선의 색상 선의 종류 두께 등 선의 스타일을 지정 할 수 있습니다. stroke를 작성하지 않으면 선이 보이지 않습니다. stroke이외 속성은 디폴트 값이 있습니다.

stroke(선 색)

stroke는 선의 색을 지정 할 수 있습니다.

1 2	<line x1=20 y1=20 x2=40 y2=40 stroke="black"> <line x1=30 y1=30 x2=50 y2=50 stroke="#000000">

위와 같이 선 색을 CSS처럼 색상 이름 또는 색상 코드로 작성 할 수 있습니다.

stroke-width(선 너비)

stroke-width는 선의 너비를 지정 할 수 있습니다.

위 코드는 stroke-width를 다르게 하였지만 모양은 같습니다. 선이 수평일 경우 width가 height가 될 수도 있기때문에 너비개념으로 이해하는 것이 좋습니다. 선은 가운데가 좌표입니다. 따라서 선의 폭을 설정하면 위 아래로 반반씩 두께를 적용하게 됩니다.

stroke-dasharray(점선)

stroke-dasharray는 점선을 지정 할 수 있습니다. 선과 띄어지는 지점의 길이를 작성합니다. 복수형태로 지정해야하고 홀수번째는 선의 길이 짝수번째는 띄어지는 길이를 지정 할 수 있습니다.

stroke-linecap(선 끝 모양)

stroke-linecap은 선끝의 모양을 지정 할 수 있습니다. 기본 값은 butt이고 다른 속성을 지정하게 되면 선끝에서 반지름만큼 길이가 조금 길어지게 됩니다. 따라서 옵션을 지정 할 때 조금 길어지는 길이를 감안하여 지정해야합니다.

속성 이름	값 형태	개요
stroke-linecap	butt	선 끝까지만 표현. default
	round	선 끝에서 둥글게 표현. 선 끝에서 반지름만큼 밖으로 나감
	square	선 끝에서 사각형 표현. 선 끝에서 반지름만큼 밖으로 나감

stroke-opacity(불투명도)

stroke-opacity는 선의 불투명도를 지정 할 수 있습니다. 불투명도는 1에서 0으로 갈수록 투명하게 표현되고 기본값은 1입니다.

속성 이름	값 형태	개요
stroke-opacity	`<opacity-value>`	불투명도. 0에서 1사이의 소수값으로 작성

stroke-linejoin(모퉁이 형태)

stroke-linejoin은 선의 모퉁이 형태를 지정 할 수 있습니다. 기본값은 miter입니다.

속성 이름	값 형태	개요
stroke-linejoin	miter	모퉁이 각 형태. 너비만큼 밖으로 표시. default
	round	둥근 형태
	bevel	모퉁이를 깎은 형태

stroke 사용가능 단위

사용가능 단위

cm, em, ex, in, mm, pc, pt, px.(기본 값 px)
stroke-width=”1px”
stroke-width=”1pt”; 1.25px
stroke-width=”1mm”; 2.543307px
stroke-width=”1ex”
stroke-width=”1pc”; 15px
stroke-width=”1em”
stroke-width=”1cm”; 35.43307px
stroke-width=”1in”; 90px

frontendsvg