CODEWITHSUNDEEP
svgsvg-animatejquery-svg
user3668065
user3668065

Reputation: 21

how to do one by one animation on svg path object?

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>

Upvotes: 0

Views: 1386

Answers (1)

enxaneta
enxaneta

Reputation: 33024

First of all a few comments:

  1. You may want to read first about How SVG Line Animation Works

  2. 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.

  3. 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.

  4. 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>

Upvotes: 1

Related Questions