0

我正在尝试在 Angular8 中创建一个 SVG。

它应该看起来是彼此面对的圆圈。我用这样的计算段创建了 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>标签中添加过渡以创建绘图效果，但未成功

任何人都可以对此有所了解吗？

4

0 回答 0