[SVG] svg태그 선/모양 그리기

위와 같은 선을 만들려면 svg 태그안의 line 요소를 활용할 수 있다.

기본적인 구조는 다음과 같다.

<svg>

<g stroke="#4992fd" stroke-width="1" fill="none">

  <line x1="254" y1="164" x2="339" y2="251" stroke="#4992fd" stroke-width="3"></line>

 </g>

</svg>

 

여기서 stroke 요소는 채색 요소를 의미한다. 여기서는 색상 코드 #4992fd 와 두께를 3px로 지정해주었다.

하나의 svg 태그에 여러개의 line 요소를 넣고 싶다면, g 태그를 여러개 자식 요소로 넣어주어서 다음과 같이 구성한다.

<svg>

<g stroke="#4992fd" stroke-width="1" fill="none">

  <line x1="254" y1="164" x2="339" y2="251" stroke="#4992fd" stroke-width="3"></line>

 </g>

<g stroke="#4992fd" stroke-width="1" fill="none">

  <line x1="354" y1="164" x2="339" y2="251" stroke="#4992fd" stroke-width="3"></line>

 </g>

<g stroke="#4992fd" stroke-width="1" fill="none">

  <line x1="154" y1="164" x2="339" y2="251" stroke="#4992fd" stroke-width="3"></line>

 </g>

</svg>

 

line 요소 말고 다른 그리기 모드를 택하고 싶으면 다음과 같은 요소가 있다.

1. <rect> 

2. <circle>

3. <path>

https://www.w3schools.com/graphics/svg_intro.asp

SVG Tutorial

 

위의 링크를 참고해서 사용하고자하는 요소를 선택하면 된다.

 

끝!