动画SVG路径 [英] Animate svg path

问题描述

我为svg路径设置了动画，但是我需要一些帮助。我想知道是否可以以一定速度然后以其他速度为路径设置动画。这是 JSFIDDLE ，以获取更多说明。

I have animated a svg path but I need some help. I want to know if it's possible to animate the path at a certain speed and then an other speed. Here is a JSFIDDLE for more explanation.

I希望行快速移动，然后文本速度降低。

I want the line to go fast and then the text to be less fast.

HTML

<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="0 0 2238.6 153.7" enable-background="new 0 0 2238.6 153.7" xml:space="preserve">
<path class="path" stroke-width="2" fill="none" stroke="#000000" d="M0,149.5c0.6,0,1629.7,0,1631,0c2.7,0,10.6,0,12.4,0c3.3,0,5.9,0,8.2,0c4.1,0,8.1,0,10.9,0
    c3.8,0,5.3,0,8.7,0c3.9,0,3.6,0.1,8.1,0c6.3-0.2,8.2-0.9,12.7-2.6c4.5-1.7,8.3-4.1,11.4-7.1c3.1-3,5.5-6.6,7.1-10.7
    c1.6-4.1,2.4-8.5,2.4-13.2c0-5.1-1-9.3-3.1-12.6c-2.1-3.3-4.8-6.1-8.2-8.3c-3.4-2.2-7.3-4.1-11.6-5.6c-4.3-1.5-8.8-3-13.3-4.4
    c-4.6-1.4-9-3-13.3-4.8c-4.3-1.8-8.2-4-11.6-6.8c-3.4-2.8-6.1-6.2-8.2-10.3c-2.1-4.1-3.1-9.3-3.1-15.5c0-4.8,0.9-9.5,2.8-14
    s4.5-8.5,8.1-11.9c3.5-3.4,7.9-6.2,13.1-8.3c5.2-2.1,11.1-3.1,17.8-3.1c7.5,0,19.1,0,25.5,0c7.5,0,22.4,0,35.9,0v140.5l44.4,0
    L1788,9.6l66.3,110.3l64.5-109.8l-0.2,140.9h87.1c0,0,64.7,0,64.7-76.9c0-72-63.3-69.4-63.3-69.4s-60.7-2.7-60.7,69.2
    c0,77,56.8,76.9,61,77c0.2,0,89.6,0,93.9,0V13.5l104.7,137.3l0-143.7l32.7,0 M1946.3,73.9 M2070.3,74.1"/>
</svg>

CSS

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

是否可以使用一个svg路径执行此操作？

Is that possible to do this with one svg path ?

推荐答案

使用此示例 http://jsfiddle.net/wxx5o9ms/1/

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';
    }
    70% {
        stroke-dashoffset: 2000;
        transition: 'stroke-dashoffset';
    }
    100% {
        stroke-dashoffset: 3800;
        transition: 'stroke-dashoffset';
    }
}

这篇关于动画SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！