设置svg的关键帧属性

Question

我已经动画一个SVG，我想使用关键帧来设置速度，但我无法实现我想要的。我希望这条线走得更快，然后文本更慢一些。但我真的不明白它是怎么工作的。

下面是一个更好解释的小提琴手。

    <svg class="svg-path" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-195.9 282.3 995.9 35.5" enable-background="new -195.9 282.3 995.9 35.5" xml:space="preserve">
<path class="path" stroke-width="1" fill="none" stroke="#000000" d="M-195.9,316.9c0.1,0,853.9,0,854.2,0c0.6,0,2.5,0,2.9,0c0.8,0,1.4,0,1.9,0c1,0,1.9,0,2.5,0
    c0.9,0,1.2,0,2,0c0.9,0,0.8,0,1.9,0c1.5,0,1.9-0.2,3-0.6c1-0.4,1.9-1,2.7-1.7c0.7-0.7,1.3-1.5,1.7-2.5c0.4-1,0.6-3,0.6-4.1
    c0-1.2-0.3-2.1-0.7-2.9c-0.4-0.8-1-1.4-1.9-1.9c-0.8-0.5-1.7-1-2.7-1.3s-2.1-0.7-3.1-1c-1.1-0.3-2.1-0.7-3.1-1.1
    c-1-0.4-1.9-0.9-2.7-1.6c-0.8-0.7-1.4-1.4-1.9-2.4c-0.5-1-0.7-2.2-0.7-3.6c0-1.1,0-1.5,0.5-2.5c0.4-1,1.4-2.1,2-2.7
    c0.8-0.8,1.9-1.2,3.1-1.7c1.2-0.5,2.6-0.7,4.2-0.7c1.7,0,4.5,0,5.9,0c1.7,0,5.2,0,8.4,0v32.8h10.4l0-32.9l15.5,25.7l15-25.6l0,32.9
    h20.3c0,0,15.1,0,15.1-17.9c0-16.8-14.8-16.2-14.8-16.2s-14.2-0.6-14.2,16.2c0,18,13.2,17.9,14.2,18c0,0,20.9,0,21.9,0v-32l24.4,32
    v-33.5h7.6"/>
</svg>

CSS

svg.svg-path {
 position: absolute;
 top:25px;
 left: 0px;
 width: 100%;
 height: auto;
}
svg.svg-path path {
  stroke-dasharray: 3800;
  animation: dash 3.5s linear reverse;
}
@keyframes dash {
 0% {
    stroke-dashoffset: 0;
    transition: 'stroke-dashoffset';
 }
 50% {
    stroke-dashoffset: 2000;
    transition: 'stroke-dashoffset';
 }
 100% {
    stroke-dashoffset: 3800;
    transition: 'stroke-dashoffset';
 }
}

Answer 1

你能试着详细阐述一下你想要达到的目标吗？

如果您希望行在结束时慢下来，以较慢的方式写出字母，您只需分配更多的时间来完成“关于stroke-dashoffset”的动画，方法是将动画从动画的开头5%的0到2000进行，然后将其余的部分保留到其余的时间，如下所示：

@keyframes dash {
    0% {
        stroke-dashoffset: 0;
        transition: 'stroke-dashoffset';
    }
    5% {
        stroke-dashoffset: 2000;
        transition: 'stroke-dashoffset';
    }
    100% {
        stroke-dashoffset: 3800;
        transition: 'stroke-dashoffset';
    }
}

但我不确定我是否正确理解了，所以我不确定这就是你想要达到的目标。