如何在svg路径对象上逐个制作动画？
我是svg对象图像的v fresh用户。当鼠标移到svg图像上时，我想一个接一个地做路径动画。当鼠标离开对象图像时，动画将反转到起始位置。我的svg对象如下：谢谢如何在svg路径对象上逐个制作动画？,svg,svg-animate,jquery-svg,Svg,Svg Animate,Jquery Svg,我是svg对象图像的v fresh用户。当鼠标移到svg图像上时，我想一个接一个地做路径动画。当鼠标离开对象图像时，动画将反转到起始位置。我的svg对象如下：谢谢 <html><head> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet"> </head> <body> <div class="h
<html><head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400"
rel="stylesheet">
</head>
<body>
<div class="half yellow">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="117.96px" height="117.96px" viewBox="0 0 117.96 117.96" enable-
background="new 0 0 220 75" xml:space="preserve">
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M113.74,55.14a.58.58,0,0,1-.41-.17L85,26.62a.58.58,0,1,1,.82-.82l28.34,28.34a.58.58,0,0,1-.41,1Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M83.31,24.71a.58.58,0,0,1-.41-.17l-1-1a.58.58,0,1,1,.82-.82l1,1a.58.58,0,0,1-.41,1Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M41.89,99.61a.58.58,0,0,1-.41-.17L11.62,69.58l59-59L80.74,20.74a.58.58,0,0,1-.82.82L70.6,12.24,13.27,69.58l29,29a.58.58,0,0,1-.41,1Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M99.31,99.61a.58.58,0,0,1-.41-1l29-29-13-13a.58.58,0,1,1,.82-.82l13.77,13.77L99.72,99.44A.58.58,0,0,1,99.31,99.61Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M70.6,128.56,55.84,113.8a.58.58,0,0,1,.82-.82L70.6,126.91,84.54,113a.58.58,0,0,1,.82.82Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M111.66,111.25H29.54a.58.58,0,0,1,0-1.16h82.12a.58.58,0,1,1,0,1.16Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M99.31,99.61a.58.58,0,0,1-.58-.58V69.52L70.6,48.24,42.48,69.52V99a.58.58,0,0,1-1.16,0V68.94L70.6,46.78,99.89,68.94V99A.58.58,0,0,1,99.31,99.61Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M107,71.6a.58.58,0,0,1-.35-.12L70.6,44.19,47.15,61.94a.58.58,0,0,1-.7-.93L70.6,42.73l36.76,27.82a.58.58,0,0,1-.35,1Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M59.61,111.25a.58.58,0,0,1-.58-.58V88.57a11.58,11.58,0,1,1,23.16,0v4.74a.58.58,0,0,1-1.16,0V88.57a10.41,10.41,0,0,0-20.83,0v22.1A.58.58,0,0,1,59.61,111.25Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M99.27,114H85a.58.58,0,1,1,0-1.16H99.27a.58.58,0,0,1,0,1.16Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M56.25,114H42a.58.58,0,0,1,0-1.16H56.25a.58.58,0,1,1,0,1.16Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M99.31,65.77a.58.58,0,0,1-.58-.58v-15H90.56v3.62a.58.58,0,0,1-1.16,0V49H99.89V65.19A.58.58,0,0,1,99.31,65.77Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M34.19,71.6a.58.58,0,0,1-.35-1l10.54-8a.58.58,0,0,1,.7.93l-10.54,8A.58.58,0,0,1,34.19,71.6Z" transform="translate(-11.62 -10.6)"></path>
<line fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" x1="69.98" y1="91.8" x2="69.98" y2="100.07"></line>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M81.6,111.25a.58.58,0,0,1-.58-.58V102.4a.58.58,0,0,1,1.16,0v8.27A.58.58,0,0,1,81.6,111.25Z" transform="translate(-11.62 -10.6)"></path>
<line fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" x1="69.98" y1="86.07" x2="69.98" y2="88.57"></line>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M81.6,99.75a.58.58,0,0,1-.58-.58V96.67a.58.58,0,1,1,1.16,0v2.49A.58.58,0,0,1,81.6,99.75Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="0" class="cls-1" d="M41.89,99.61a.58.58,0,0,1-.41-.17L11.62,69.58l59-59L80.74,20.74a.58.58,0,0,1-.82.82L70.6,12.24,13.27,69.58l29,29a.58.58,0,0,1-.41,1Z" ></path>
<path fill="none" stroke="#ff9100" stroke-width="0.3" class="cls-1" d="M99.31,99.61a.58.58,0,0,1-.41-1l29-29-13-13a.58.58,0,1,1,.82-.82l13.77,13.77L99.72,99.44A.58.58,0,0,1,99.31,99.61Z" transform="translate(-11.62 -10.6)"></path>
<path fill="none" stroke="#ff9100" stroke-width="1" class="cls-1" d="M70.6,128.56,55.84,113.8a.58.58,0,0,1,.82-.82L70.6,126.91,84.54,113a.58.58,0,0,1,.82.82Z" transform="translate(-11.62 -10.6)"></path>
</svg></div>
</div>
<div class="half grey"></div>
</body></html>
首先有几点意见： 你可能想先读一读关于 我无法使用第二个JSFIDLE，因为这些路径非常复杂，不适合路径动画。我决定自己画一条路 我正在设置动画的路径是myPath。要为myPath构建stroke dasharray，我使用中的路径。请阅读javascript中的注释 我正在为stroke dasharray属性使用CSS转换设置路径动画 //myPathGroup路径长度的数组 设长度=[]； //myPathGroup路径数组 让路径=Array.frommyPathGroup.querySelectorAllmyPathGroup路径； //构建长度数组 paths.mapp=>{length.pushp.getTotalLength} //myPath的总长度 设l=myPath.getTotalLength； //将myPath的总长度保存在CSS变量中 myPath.style.setProperty-foo，l； //为myPath构建stroke dasharray myPath.style.strokeDasharray=`${length.join}${l}`； svg{最大高度：100vh；} 路径{ 填充：无； 笔画：黑色； 笔划线头：圆形； 笔划线条连接：圆形； } myPath{笔划：红色；笔划宽度：1.5px； 行程偏移量：calcvar foo*1px； 过渡：行程偏移1s； } svg:hover myPath{stroke dashoffset:0} myPathGroup路径{stroke:green} 用于为myPath构建笔划数组
我想帮忙。不幸的是，你有很多重复的路径。也许你应该回到Illustrator或任何你正在使用的编辑器，删除额外的路径。另外，在重新编辑时，请确保按照您希望的顺序绘制路径。非常感谢@enxaneta我会更新文件并让您知道：谢谢：嗨@enxaneta请用作我的新svg对象。现在，对象中只有两条路径。我只想为cls-1a类路径制作动画。初始加载我可以看到cls-1路径和鼠标在其上的动画开始运行基于cls-1apath和鼠标离开反向回到起始位置。谢谢。嗨@enxaneta，非常感谢。这正是我想要的。当然，我会通读你共享的链接。请告诉我您何时绘制illustrator使用的路径或通过代码绘制的路径？谢谢您接受我的回答。我从illustrator中绘制路径，因为我希望得到与您的绘图相同的结果。我通过代码从路径中获取值来绘制myPath。