如何为SVG虚线设置动画

Question

 var path = document.querySelector('.path'); var length = path.getTotalLength(); path.style.transition = path.style.WebkitTransition = 'none'; path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; path.getBoundingClientRect(); path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out'; 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"> <path fill="none" stroke="#596E7A" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="25,25" class="path" stroke-linecap="round" d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 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 width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> <path fill="none" stroke="#596E7A" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="25,25" stroke-linecap="round" d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 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虚线。 我想要动画虚线，但是虚线已经变为实线。 如何像在顶部那样动画化下行线？

Answer 1

标准线条绘制技巧通过使虚线图案的虚线偏移量动画化来工作。 如果行已经虚线，则不能使用相同的技术。

一种简单的方法是用与背景相同颜色的另一条线覆盖您的行。 然后对其进行动画处理，以显示其下方的虚线。

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

 <svg width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643"> <path fill="none" stroke="#596E7A" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="25,25" stroke-linecap="round" d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 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"/> <!-- white path that covers the first one --> <path fill="none" stroke="white" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="25,25" class="path" stroke-linecap="round" d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929 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"> </svg>