Question

如何使用svg和javascript同时为多个路径设置动画。

这是我正在使用的javascript：

var path = document.querySelector('#Layer_1 path');
var length = path.getTotalLength();

// Clear any previous transition
path.style.transition = path.style.WebkitTransition = 'none';

// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();

// Define our transition
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';

// Go!
path.style.strokeDashoffset = '0';

Link to jsfiddle

Answer 1

问题是您只获得一条document.querySelector()

的路径

因此，如果我们将其更改为document.querySelectorAll()并对其执行的所有路径进行迭代。

像这样：

＆＃13;

var paths = document.querySelectorAll('#Layer_1 path');

[].forEach.call(paths, function(path) {
  var length = path.getTotalLength();
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition =
    'none';
  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition =
    'stroke-dashoffset 2s ease-in-out';
  // Go!
  path.style.strokeDashoffset = '0';
})

＆＃13;

<body>

  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="196.039px" height="185.064px" viewBox="0 0 196.039 185.064" enable-background="new 0 0 196.039 185.064" xml:space="preserve">
    <g>
      <g>
        <path fill="none" stroke="#651D79" stroke-width="3.7953" stroke-miterlimit="10" d="M91.93,59.704
			c3.347-5.793,3.347-15.27,0-21.063l-16.5-28.594c-3.347-5.79-10.823-7.791-16.616-4.448l-16.493,9.525
			c-5.789,3.347-7.791,10.815-4.447,16.615l16.504,28.576c3.343,5.79,0.604,10.534-6.078,10.534H15.298
			c-6.69,0-12.161,5.478-12.161,12.157v19.043c0,6.69,5.471,12.164,12.161,12.164h33.004c6.687,0,14.896-4.744,18.239-10.533
			L91.93,59.704z" />
      </g>
      <g>
        <g>
          <path fill="none" stroke="#651D79" stroke-width="3.7953" stroke-miterlimit="10" d="M72.631,114.213
				c-6.69,0-14.899,4.737-18.247,10.526l-16.508,28.594c-3.343,5.793-1.342,13.269,4.455,16.616l16.486,9.514
				c5.796,3.347,13.269,1.345,16.615-4.448l16.5-28.583c3.347-5.8,8.817-5.8,12.165,0l16.497,28.576
				c3.343,5.789,10.822,7.791,16.612,4.448l16.489-9.518c5.793-3.343,7.798-10.822,4.451-16.612l-16.5-28.576
				c-3.347-5.8-11.556-10.537-18.239-10.537H72.631z" />
        </g>
        <g>
          <path fill="none" stroke="#651D79" stroke-width="3.7953" stroke-miterlimit="10" d="M129.479,103.68
				c3.347,5.789,11.556,10.526,18.246,10.526h33.012c6.69,0,12.164-5.467,12.164-12.157V83.006
				c-0.007-6.69-5.478-12.164-12.168-12.164l-33.005,0.007c-6.686,0-9.421-4.744-6.078-10.534l16.497-28.576
				c3.347-5.8,1.346-13.269-4.451-16.615l-16.489-9.525c-5.79-3.343-13.269-1.334-16.608,4.459l-16.5,28.576
				c-3.347,5.789-3.347,15.27,0,21.07L129.479,103.68z" />
        </g>
      </g>
    </g>
  </svg>

</body>

＆＃13;

Answer 2

您可以遍历所有路径

var paths = document.querySelectorAll('#Layer_1 path');

for (i = 0; i < paths.length; i++) {

    var length = paths[i].getTotalLength();
    // Clear any previous transition
    paths[i].style.transition = paths[i].style.WebkitTransition ='none';
    // Set up the starting positions
    paths[i].style.strokeDasharray = length + ' ' + length;
    paths[i].style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    paths[i].getBoundingClientRect();
    // Define our transition
    paths[i].style.transition = paths[i].style.WebkitTransition = 'stroke-dashoffset 3s ease-in-out';
    // Go!
    paths[i].style.strokeDashoffset = '0';
}

JSFiddle

注意：您也可以尝试Vivus库，轻松且易于维护

如何为多个svg路径设置动画？

2 个答案: