Animation 我想在svg路径中的选定点开始svg路径的动画

我对SVG动画有一些问题。我想从SVG路径中的选定点开始制作动画。现在，我的动画从中上侧开始。但我想从圆圈的左侧或右侧中间开始制作动画。 是否有任何技术可以选择动画的起点？ 下面是我的笔，你可以看到我的代码

<div class="step-1-wrapper steps ">
  <div class="step-1-inner">
    <div class="step-1-icon-wrap anim-step-1" >
        <svg class="circular-chart orange step-1-circle">
        <line stroke-dasharray="5, 5" x1="250" y1="255" x2="330" y2="255" class="step-1-2-line-mvr"></line>
        <line x1="250" y1="255" x2="330" y2="255" class="step-1-2-line-mvr-anim"></line>
        <path class="circle-bg" d="M165 170
        a 85 85 0 0 1 0 170
        a 85 85 0 0 1 0 -170"></path>
        <path class="anim-circle" d="M165 170
        a 85 85 0 0 1 0 170
        a 85 85 0 0 1 0 -170"></path>
        </svg>
    </div>
  </div>
</div>

.steps {
    display: inline-block;
    width: 24%;
    vertical-align: middle;
    text-align: center;
    margin-right: -2px;
    margin-left: -2px;
}
.step-1-icon-wrap {
    height: 155px;
    width: 155px;
    background-color: #ffffff;
    border-radius: 100%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(26,122,171,0.25);
    -moz-box-shadow: 0px 0px 10px 0px rgba(26,122,171,0.25);
    box-shadow: 0px 0px 10px 0px rgba(26,122,171,0.25);
    margin: 0 auto;
    margin-left: 30px;
}
.circular-chart {
    position: absolute;
    height: 100%;
    width: 100%;
    left: -57px;
    top: 3px;
}
.anim-circle {
    fill: transparent;
    stroke: #f8fcff;
    stroke-width: 3;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.anim-circle {
    fill: transparent;
    stroke: #f8fcff;
    stroke-width: 3;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.circle-bg {
    fill: none;
    stroke: #57c1f8;
    stroke-width: 2;
    stroke-dasharray: 6;
}
.step-1-2-line-mvr {
    stroke: #57c1f8;
    stroke-width: 2;
}
.step-1-2-line-mvr-anim {
    stroke: #f8fcff;
    stroke-width: 3;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.anim-step-1 .step-1-2-line-mvr-anim {
    animation: dash 3s linear 1.5s normal 1;
}
.anim-step-1 .anim-circle {
    animation: dash 3s linear 1s normal 1;
}


.step-1-inner{
    position: relative;
    min-height: 430px;
    padding-top: 180px;
}


@keyframes dash {
    0% {
        stroke-dashoffset: 0;
    } 
    100% {
        stroke-dashoffset: 1000;
    }
}

.步骤{
显示：内联块；
宽度：24%；
垂直对齐：中间对齐；
文本对齐：居中；
右边距：-2px；
左边距：-2px；
}
.第1步-图标-换行{
高度：155px；
宽度：155px；
背景色：#ffffff；
边界半径：100%；
-网络工具包盒阴影：0px 0px 10px 0px rgba（26122171,0.25）；
-moz盒阴影：0px 0px 10px 0px rgba（26122171,0.25）；
盒影：0px 0px 10px 0px rgba（26122171,0.25）；
保证金：0自动；
左边距：30px；
}
.圆图{
位置：绝对位置；
身高：100%；
宽度：100%；
左：-57px；
顶部：3px；
}
.动漫圈{
填充：透明；
行程：#f8fcff；
笔画宽度：3；
笔划阵列：1000；
行程偏移量：1000；
}
.动漫圈{
填充：透明；
行程：#f8fcff；
笔画宽度：3；
笔划阵列：1000；
行程偏移量：1000；
}
.圆形背景{
填充：无；
行程：#57c1f8；
笔画宽度：2；
行程：6；
}
.步骤1-2-line-mvr{
行程：#57c1f8；
笔画宽度：2；
}
.步骤1-2-line-mvr-anim{
行程：#f8fcff；
笔画宽度：3；
笔划阵列：1000；
行程偏移量：1000；
}
.anim-step-1.step-1-2-line-mvr-anim{
动画：短跑3s线性1.5s正常1；
}
.anim-step-1.动画圈{
动画：短跑3s线性1s正常1；
}
.第1步-内部{
位置：相对位置；
最小高度：430px；
填充顶部：180px；
}
@关键帧破折号{
0% {
笔划偏移：0；
} 
100% {
行程偏移量：1000；
}
}

---

我将展示从右四分之一点开始的动画的一些可能性。很明显，如何更改左点的位置

1.围绕圆心旋转圆

---

（在我注意到您用白色笔划模糊了蓝色路径之前，您有过一段时间，并且您错误地将

.anim circle

的CSS规则加倍）

谢谢您的帮助。这对我将是很大的帮助。我用过它，工作得很好。

<path class="anim-circle" transform="rotate(90 165 255)" d="M165 170
    a 85 85 0 0 1 0 170
    a 85 85 0 0 1 0 -170"></path>

<path class="anim-circle" d="M250 255
    a 85 85 0 0 1 -170 0
    a 85 85 0 0 1 170 0"></path>

.anim-circle {
    stroke-dasharray: 0 534;
    stroke-dashoffset: -133.5; /*move the start of the stroke by one quarter*/
}

@keyframes dash {
    0% {
        stroke-dasharray: 534 0; /*all stroke*/
    }
    100% {
        stroke-dasharray: 0 534; /*all all gap*/
    }
}