SVG로 도형 만들기

 

 

svg로 도형 만들기

 

✍ 코드

<svg width="500px" height="700px">
  <!--
  	원
    cx/cy: 중심점의 x/y축 좌표
  -->
  <circle cx="50" cy="50" r="40" />

  <!--
    타원
    rx/ry : x/y축의 반경
  -->
  <ellipse cx="50" cy="150" rx="30" ry="20" />

  <!--
    사각형
    rx, ry를 통해 둥근 사각형을 만들 수 있다.
  -->
  <rect x="25" y="200" width="40" height="40" rx="5" ry="5" />

  <!--
    다각형
    poionts: x및 y좌표를 나타내는 숫자 쌍으로 정의 됨
  -->
  <polygon points="50, 280 0, 320 100, 320" />

  <!--
    선
    x1/y1: x/y축의 첫 번째 좌표
  -->
  <line x1="0" y1="380" x2="150" y2="380" stroke="black" />

  <!--path-->
  <path d="M 0 350 q 50 -50 100 0 l 100 0" />
</svg>

✅ 결과

태그들이 작성된 순서와 상관 없이 좌표를 지정해줄 수 있다.

만든 도형이 겹칠경우 html상에서 아래에 위치한 것이 앞으로 나타난다.

좌표들은 설명을 들었을 때는 이해가 잘 안되었는데 직접 좌표를 조정해서 위치를 바꿔보며 감을 익힐 수 있었다.

 

fill, opacity 속성

fill속성을 사용하여 도형내부의 색을 채울 수 있다.

rgba를 사용하여 투명도를 조절할 수도 있고 opacity를 사용하여 조절할 수도 있다.

 

✍ 코드

<svg width="500px" height="700px">
  <circle cx="50" cy="50" r="40" />

  <circle cx="50" cy="150" r="40" fill="brown" />

  <circle cx="50" cy="250" r="40" fill="rgba(0,0,0,0.5)" />
  <circle cx="100" cy="250" r="40" fill="brown" opacity="0.5" />
</svg>

✅ 결과

 

 

line

* line은 stroke 속성이 지정되어 있어야 화면에 출력된다.

* fill로 색상 지정 하는거 아님

 

✍ 코드

<svg width="500px" height="700px">
  <!---- fill="black" 로 적용 안됨 -->
  <line x1="30" y1="20" x2="200" y2="20" stroke="red" stroke-width="5" />
  <line x1="30" y1="40" x2="200" y2="40" stroke="red" stroke-width="5" stroke-opacity="0.5" stroke-linecap="butt" />
  <line x1="30" y1="60" x2="200" y2="60" stroke="orange" stroke-width="5" stroke-linecap="round" />
</svg>

✅ 결과

 

 

직접 태그 안의 속성으로 지정하지 않고 css로 지정할 수 있다.

 

✍ 코드

<style>
  .linecap-blue {
    stroke: blue;
    stroke-width: 5;
    stroke-linecap: round
  }
</style>
<svg width="500px" height="700px">
  <line x1="30" y1="80" x2="200" y2="80" class="linecap-blue" />
</svg>

✅ 결과

 

 

그룹화

g태그를 사용하여 한번에 스타일을 조정할 수 있다.

 

✍ 코드

<svg width="500px" height="700px">
  <g fill="blue">
    <text x="0" y="20">blue Group</text>
    <circle cx="20" cy="50" r="20" />
    <polygon points="80, 30 70, 70 50, 50" />
  </g>
  <g fill="red">
    <text x="100" y="20">Red Group</text>
    <circle cx="120" cy="50" r="20" />
    <polygon points="180, 30 170, 70 150, 50" />
  </g>
</svg>

✅ 결과

 

일일히 내부 요소의 위치를 변경하기가 불편한데 transform 속성으로

그룹자체의 위치를 변경시킬수도 있다.

 

<g fill="red" transform="translate(100)">
    <text x="0" y="20">Red Group</text>
    <circle cx="20" cy="50" r="20" />
    <polygon points="80, 30 70, 70 50, 50" />
</g>

 

 

 

이 외에도 다양한 속성들이 존재한다

MDN: SVG Attribute reference