如何制作动画的SVG虚线

var path = document.querySelector('.path'); 
 
\t var length = path.getTotalLength(); 
 
\t path.style.transition = path.style.WebkitTransition = 
 
    \t 'none'; 
 
\t path.style.strokeDasharray = length + ' ' + length; 
 
\t path.style.strokeDashoffset = length; 
 
\t path.getBoundingClientRect(); 
 
\t path.style.transition = path.style.WebkitTransition = 
 
    \t 'stroke-dashoffset 2s ease-in-out'; 
 
\t path.style.strokeDashoffset = '0';

<svg id="test" width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> 
 
\t <path fill="none" 
 
    \t stroke="#596E7A" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="25,25" class="path" stroke-linecap="round" 
 
\t d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 \t c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075-8.983,449.372,67.834 c-15.801,113.4,167.532,164.904,318.724,34.547"/> 
 
\t </svg> 
 

 
\t <svg width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> 
 
\t <path fill="none" 
 
    \t stroke="#596E7A" 
 
\t stroke-width="10" 
 
\t stroke-miterlimit="10" 
 
\t stroke-dasharray="25,25" 
 
\t stroke-linecap="round" 
 
\t d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 \t c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075- 8.983,449.372,67.834 
 
\t c-15.801,113.4,167.532,164.904,318.724,34.547"/> 
 
\t </svg>

我得到SVG虚线。我想要动画虚线，但是虚线已经变成了实体。如何在顶部生成动画？

来源

2017-07-15 tishkunov

标准线条绘制技巧通过动画短划线的虚线偏移来工作。如果线条已经破裂，则不能使用相同的技巧。

一个简单的方法来做到这一点将是覆盖与另一个是与背景相同的颜色的行。然后动画，而不是显示它下面的虚线。

var path = document.querySelector('.path'); 
 
\t var length = path.getTotalLength(); 
 
\t path.style.transition = path.style.WebkitTransition = 
 
    \t 'none'; 
 
\t path.style.strokeDasharray = length + ' ' + length; 
 
\t path.style.strokeDashoffset = 0; 
 
\t path.getBoundingClientRect(); 
 
\t path.style.transition = path.style.WebkitTransition = 
 
    \t 'stroke-dashoffset 2s ease-in-out'; 
 
\t path.style.strokeDashoffset = -length;

<svg width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> 
 
\t <path fill="none" 
 
    \t stroke="#596E7A" 
 
\t stroke-width="10" 
 
\t stroke-miterlimit="10" 
 
\t stroke-dasharray="25,25" 
 
\t stroke-linecap="round" 
 
\t d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 \t c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075-8.983,449.372,67.834 
 
\t c-15.801,113.4,167.532,164.904,318.724,34.547"/> 
 

 
    <!-- white path that covers the first one --> 
 
    <path fill="none" 
 
    \t stroke="white" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="25,25" class="path" stroke-linecap="round" 
 
\t d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 \t c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075-8.983,449.372,67.834 c-15.801,113.4,167.532,164.904,318.724,34.547"/> 
 
</svg> 
 
    
 
    
 
<svg id="test" width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> 
 
\t </svg>

来源

2017-07-15 21:38:48

如何制作动画的SVG虚线

回答

相关问题