i am v fresh user for svg object image. And i would like to do path animation one by one when mouse over on svg image. When mouse leave on object image the animation will reverse to the starting position. My svg object is like below: thank you!
<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>
First of all a few comments:
You may want to read first about How SVG Line Animation Works
I couldn't use your second jsfiddle since those are very complex paths not suitable for paths animation. I decided to draw my own path.
The path I'm animating is #myPath. To build the stroke-dasharray for #myPath I use the paths in the <defs>. Please read the comments in the javascript.
I'm animating the path using CSS transition for the stroke-dasharray attribute.
// 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>