[Vue3] 원형차트에 그라데이션 넣기

코드를 작성해보자

<linearGradient> 요소는 linear gradient를 표현한다.

x1, y1, x2, y2 속성 : 그라데이션의 방향을 지정
stop 요소 : 그라데이션에서 색상의 구간을 정의하는 역할
offset 속성 : 각각의 구간의 시작 위치를 나타냅니다.
style 속성 : 해당 구간의 색상을 정의합니다.
stroke=url(#grad)을 사용하여 에서 정의된 그라데이션을 할당한다.

<template>

  <div class="round-chart">

    <svg xmlns="http://www.w3.org/2000/svg" width="342" height="200" viewBox="0 0 320 200">

      <path xmlns="http://www.w3.org/2000/svg" d="M82,100A80,80,0,1,0,242,100A80,80,0,1,0,82,100Z" fill="transparent" stroke="url(#gradient)" stroke-width="20" />

     

      <!-- 그라데이션 영역 -->

      <defs>

        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">

          <stop offset="0%" stop-color="red" />

          <stop offset="100%" stop-color="yellow" />

        </linearGradient>

      </defs>

    </svg>

  </div>  

</template>