我是SVG对象图片的新用户。当鼠标悬停在svg图像上时，我想一一制作路径动画。当鼠标停留在对象图像上时，动画将反转到起始位置。我的svg对象如下：谢谢！
<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>
答案 0 :(得分：1)
首先，一些评论：
您可能想先阅读有关How SVG Line Animation Works
我无法使用第二个jsfiddle，因为它们是非常复杂的路径，不适合使用路径动画。我决定走自己的路。
我正在设置动画的路径是#myPath。要为stroke-dasharray构建#myPath，请使用<defs>中的路径。请阅读javascript中的注释。
我正在使用stroke-dasharray属性的CSS过渡为路径设置动画。
// the array of the lengths of the myPathGroup paths
let lengths = [];
// the myPathGroup paths array
let paths = Array.from(myPathGroup.querySelectorAll("#myPathGroup path"));
// build the lengths array
paths.map((p) =>{lengths.push(p.getTotalLength())})
// total length of myPath
let l = myPath.getTotalLength();
// save the total length of myPath in a CSS variable
myPath.style.setProperty("--foo", l);
// build the stroke-dasharray for myPath
myPath.style.strokeDasharray = `${lengths.join(" ")} ${l} `;svg{max-height:100vh;}
path{
fill:none;
stroke:black;
stroke-linecap: round;
stroke-linejoin:round;
}
#myPath{stroke:red; stroke-width:1.5px;
stroke-dashoffset:calc(var(--foo) * 1px);
transition: stroke-dashoffset 1s;
}
svg:hover #myPath{stroke-dashoffset:0}
#myPathGroup path{stroke:green}<svg viewBox="318.293 -0.723 91.346 91.43">
<defs>
<g id="myPathGroup">
<desc>Used to build the stroke-dasharray for myPath</desc>
<path d="M363.966,0.712 L370.945,7.699" />
<path d="M370.945,7.699 L372.72,9.475" display="none" />
<path d="M372.72,9.475 L373.78,10.538" />
<path d="M373.78,10.538 L375.381,12.139" display="none" />
<path d="M375.381,12.139 L396.689,33.47" />
<path d="M396.689,33.47 L398.054,34.836" display="none" />
<path d="M398.054,34.836 L408.202,44.992 L385.924,67.324" />
<path d="M385.924,67.324 L374.755,78.521" display="none" />
<path d="M374.755,78.521 L364.008,89.293 L353.119,78.426" />
<path d="M353.119,78.426 L341.877,67.205" display="none" />
<path d="M341.877,67.205 L319.62,44.992 L363.966,0.712" />
</g>
</defs>
<g id="yourPaths">
<path d="M395.328,76.793h-62.656c-0.244,0-0.442-0.198-0.442-0.442
c0-0.245,0.198-0.442,0.442-0.442h62.656c0.244,0,0.441,0.197,0.441,0.442C395.77,76.595,395.572,76.793,395.328,76.793
L395.328,76.793z"/>
<path d="M385.904,67.912c-0.244,0-0.441-0.198-0.441-0.442l0,0V44.954
L364,28.718l-21.455,16.236v22.493c0,0.244-0.198,0.441-0.443,0.441c-0.244,0-0.442-0.197-0.442-0.441V44.512L364,27.604
l22.348,16.907v22.936c0.012,0.243-0.176,0.451-0.42,0.465C385.92,67.912,385.912,67.912,385.904,67.912z"/>
<path d="M391.771,46.541c-0.096,0-0.189-0.033-0.267-0.092L364,25.628
l-17.892,13.543c-0.196,0.147-0.475,0.108-0.622-0.088c-0.147-0.196-0.108-0.474,0.088-0.622l0,0L364,24.514l28.047,21.226
c0.178,0.168,0.186,0.447,0.018,0.625c-0.074,0.08-0.176,0.129-0.285,0.138L391.771,46.541z"/>
<path d="M355.615,76.793c-0.244,0-0.442-0.198-0.442-0.442l0,0V59.488
c0-4.879,3.956-8.834,8.835-8.834c4.879,0,8.835,3.955,8.835,8.834v3.617c0,0.244-0.198,0.442-0.442,0.442
s-0.442-0.198-0.442-0.442v-3.617c0-4.389-3.558-7.945-7.947-7.945c-4.388,0-7.946,3.557-7.946,7.945v16.862
c0,0.244-0.198,0.442-0.442,0.442C355.62,76.793,355.618,76.793,355.615,76.793z"/>
<path d="M385.875,78.891h-10.889c-0.244,0-0.441-0.197-0.441-0.441
c0-0.245,0.197-0.443,0.441-0.443h10.889c0.244,0,0.441,0.198,0.441,0.443C386.316,78.693,386.119,78.891,385.875,78.891z"/>
<path d="M353.051,78.891h-10.872c-0.245,0-0.443-0.197-0.443-0.441
c0-0.245,0.198-0.443,0.443-0.443h10.872c0.245,0,0.443,0.198,0.443,0.443C353.494,78.693,353.296,78.891,353.051,78.891z"/>
<path d="M385.904,42.093c-0.244,0-0.441-0.198-0.441-0.443l0,0V30.206h-6.234v2.762
c0,0.245-0.197,0.443-0.442,0.443c-0.244,0-0.442-0.198-0.442-0.443v-3.67h8.004V41.65
C386.348,41.895,386.149,42.093,385.904,42.093z"/>
<path d="M336.22,46.541c-0.244-0.02-0.425-0.234-0.404-0.478
c0.009-0.108,0.058-0.21,0.137-0.285l8.042-6.104c0.196-0.147,0.474-0.108,0.622,0.088s0.108,0.474-0.088,0.622l0,0l-8.042,6.104
C336.406,46.533,336.312,46.552,336.22,46.541z"/>
<line x1="372.393" y1="70.041" x2="372.393" y2="76.351"/>
<path d="M372.393,76.793c-0.244,0-0.442-0.198-0.442-0.442l0,0v-6.31
c0-0.244,0.198-0.443,0.442-0.443s0.442,0.199,0.442,0.443v6.31C372.835,76.595,372.637,76.793,372.393,76.793L372.393,76.793z"/>
<line x1="372.393" y1="65.669" x2="372.393" y2="67.576"/>
<path d="M372.393,68.019c-0.244,0-0.442-0.198-0.442-0.442l0,0v-1.907
c0-0.245,0.198-0.442,0.442-0.442s0.442,0.197,0.442,0.442v1.899c0.005,0.244-0.19,0.446-0.435,0.45
C372.398,68.019,372.395,68.019,372.393,68.019z"/>
</g>
<path id="myPath" d="M363.966,0.712 408.202,44.992 364.008,89.293 319.62,44.992z" />
</svg>