Как сделать одну за другой анимацию на объекте SVG Path? - PullRequest
Новая
       40

Как сделать одну за другой анимацию на объекте SVG Path?

0 голосов
/ 09 сентября 2018

Я v новый пользователь для изображения объекта 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Прежде всего несколько комментариев:

  1. Вы можете сначала прочитать о Как работает SVG Line Animation

  2. Я не смог использовать ваш второй jsfiddle, так как это очень сложные пути, не подходящие для анимации путей. Я решил нарисовать свой собственный путь.

  3. Путь, который я оживляю, #myPath. Для построения stroke-dasharray для #myPath я использую пути в <defs>. Пожалуйста, прочитайте комментарии в JavaScript.

  4. Я анимирую путь, используя CSS-переход для атрибута stroke-dasharray. 

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