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

Question

我对 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;
    }
}

my SVG animation pen

Answer 1

我将从右四分之一点开始展示动画的一些可能性。如何将它们更改为左点应该很明显。

1。围绕其中心旋转圆

<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>

2。从右四分之一点开始路径

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

3。动画正确 stroke-dasharray 长度

您正在使用路径长度的经验法则值。顺便说一句，这导致对动画实际花费的时间控制不足。并不复杂：你的圆有一个半径r = 85，所以圆周是2π × r ≃ 534。

（对于吹毛求疵的人：理论上，您可以使用pathLength 属性为笔画定义人工长度，但在 Safari 中没有实现。）

stroke-dasharray 的工作原理是这样的：它是一个数字列表，每个数字交替表示笔划和间隙的长度。没有理由不为这个列表设置动画，而不是 stroke-dashoffset，它可以保持在四分之一圆的位置。

.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*/
    }
}

（在我注意到你用白色笔划模糊蓝色路径之前，你让我注意到你错误地将.anim-circle 的 CSS 规则加倍。）