svg 활용

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

<line> - SVG: Scalable Vector Graphics | MDN

 

선그리기 및 애니메이션 등 활용 범위 다양

 

[angular attribute svg 사용법]

ex : 

In order to bind to SVG element attributes in Angular, you must prefix them with attr:

For your circle this will be:

<svg height="100" width="100">
      <circle fill="white"
          [attr.cx]="parsedSize/2"
          [attr.cy]="parsedSize/2"
          [attr.r]="radius"
          [attr.stroke]="stroke"
          [attr.stroke-width]="strokeWidthCapped"
          [attr.stroke-dasharray]="circumference"
          [attr.stroke-dashoffset]="(1 - parsedComplete) * circumference"/>
</svg>