如何製作動畫的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虛線

回答

相關問題