动画svg路径

Question

我有动画svg路径，但我需要一些帮助。我想知道是否有可能以特定速度和其他速度对路径进行动画制作。以下是JSFIDDLE的更多说明。

我希望行快，然后文本不那么快。

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路径要做到这一点？

Answer 1

使用这个例子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'; 
    } 
}