Question

我发现以下代码逐步绘制一条带有css3动画和svg画布的行。唯一的问题是我想要破折线，但我不知道如何修改它来这样做，改变stroke-dasharray似乎什么也没做。谢谢！

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <style type="text/css">
    path {
      animation-name:animateDash;
      animation-duration:5s;
      animation-iteration-count:infinite;
    }
    @keyframes animateDash {
      from{stroke-dasharray:0,2305}
      to  {stroke-dasharray:2305,0}
    } 
  </style>
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
    stroke-width="3" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>

http://jsfiddle.net/G4b6b/

Answer 1

这篇文章可能会对您有所帮助：SVG Stroke Proprieties。更新的小提琴是Fiddle Updated。中风-dasharray的适当性是你想要达到你想要的结果。

@keyframes animateDash {
  from{stroke-dasharray:10,10}
  to  {stroke-dasharray:15,15}
}

如果这不是您想要的，并且您需要更多帮助，请给我更多细节。

希望它有所帮助。

＆＃13;

    path {
      animation-name:animateDash;
      animation-duration:3s;
      animation-iteration-count:3;
    }
    @keyframes animateDash {
      from{stroke-dasharray:10,10}
      to  {stroke-dasharray:15,15}
    }

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
  <style type="text/css">
  </style>
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
    stroke-width="3" stroke-linecap="round" fill="none" stroke="red" stroke-dasharray="10,10" d="M5 60 l215 0"/>
</svg>

＆＃13;

逐步在CSS3中绘制虚线 - 动画

1 个答案: