динамическое создание круга SVG с несколькими сегментами с использованием <g>и <use>- как добиться анимации? - PullRequest
Новая
       33

динамическое создание круга SVG с несколькими сегментами с использованием <g>и <use>- как добиться анимации?

0 голосов
/ 09 апреля 2020

Я пытаюсь создать SVG в Angular8.

Он должен выглядеть кругами лицом друг к другу. Я создал 2 круга с вычисленными сегментами, например: 

<svg>
<style>
#leftCircle {
 transition: stroke-dasharray 3s cubic-bezier(0.6, -0.5, 0.2 ,1.5) 
}
</style>
<defs>
<circle id="leftCircle" [attr.r] ="r1" /> 
<circle id="RightCircle" [attr.r] ="r2" /> 
</defs>
<g id="circle-group" fill="none transform="translate(20,20)">
    <use x="50" y="50" *ngFor ="let segment of segments: index as i" id="segment--{{segment.segmentid}}
    [attr.stroke-dasharray]=getStrokeArray(i) [attr.stroke-dashOffset]=getDashOffset(i)
    [attr.stroke]=getStrokeColor(i) [attr.stroke-width]=x></use>
    <use x="50" y="50" 
    [attr.stroke-dasharray]=getStrokeArray1(i) [attr.stroke-dashOffset]=getDashOffset1(i)
    [attr.stroke]=getStrokeColor1(i) [attr.stroke-width]=y></use>


</g>
 </svg>

Что я хотел бы сделать:

Создать эффект анимации, который является «эффектом медленного рисования» от сегмента к сегменту.

Я безуспешно пытался добавить переход в тег <style> для создания эффекта рисования

Может кто-нибудь пролить свет на это?

...