Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何设置svg虚线的动画_Javascript_Jquery_Svg - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 如何设置svg虚线的动画

Javascript 如何设置svg虚线的动画

javascript jquery svg

Javascript 如何设置svg虚线的动画,javascript,jquery,svg,Javascript,Jquery,Svg,var path=document.querySelector（'.path'）； var length=path.getTotalLength（）； path.style.transition=path.style.WebkitTransition= “没有”； path.style.strokeDasharray=长度+“”+长度； path.style.strokeDashoffset=长度； getBoundingClientRect（）； path.style.transition=p

var path=document.querySelector（'.path'）；
var length=path.getTotalLength（）；
path.style.transition=path.style.WebkitTransition=
“没有”；
path.style.strokeDasharray=长度+“”+长度；
path.style.strokeDashoffset=长度；
getBoundingClientRect（）；
path.style.transition=path.style.WebkitTransition=
“冲程缓冲装置2缓进缓出”；
path.style.strokedashcoffset='0'

标准的线条绘制技巧是通过设置虚线图案的虚线偏移动画来实现的。如果直线已经虚线，则不能使用相同的技术

一个简单的方法是用另一个与背景颜色相同的线条覆盖你的线条。然后设置动画以显示其下方的虚线



var path=document.querySelector（'.path'）；
var length=path.getTotalLength（）；
path.style.transition=path.style.WebkitTransition=
“没有”；
path.style.strokeDasharray=长度+“”+长度；
path.style.strokeDashoffset=0；
getBoundingClientRect（）；
path.style.transition=path.style.WebkitTransition=
“冲程缓冲装置2缓进缓出”；
path.style.strokeDashoffset=-长度



当背景不是纯色时会发生什么？比如说，梯度？而不是用另一个覆盖你的线。改为使用
，并在其中设置线条动画。