Как я могу анимировать несколько путей SVG?

Как я могу анимировать несколько путей одновременно с помощью svg и javascript.Как я могу анимировать несколько путей SVG?

Вот 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

источник

2015-07-01 Connor Brough

Проблема заключается в том, что вы только получаете один путь с document.querySelector()

Итак, если мы изменим, что document.querySelectorAll() и перебирать он для всех путей работает.

Как это:

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'; 
 
})

<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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t L91.93,59.704z" /> 
 
     </g> 
 
     <g> 
 
     <g> 
 
      <path fill="none" stroke="#651D79" stroke-width="3.7953" stroke-miterlimit="10" d="M72.631,114.213 
 
\t \t \t \t 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 
 
\t \t \t \t 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 
 
\t \t \t \t 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 
 
\t \t \t \t 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 
 
\t \t \t \t c3.347,5.789,11.556,10.526,18.246,10.526h33.012c6.69,0,12.164-5.467,12.164-12.157V83.006 
 
\t \t \t \t 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 
 
\t \t \t \t 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 
 
\t \t \t \t c-3.347,5.789-3.347,15.27,0,21.07L129.479,103.68z" /> 
 
     </g> 
 
     </g> 
 
    </g> 
 
    </svg> 
 

 
</body>

источник

2015-07-01 10:20:50

Вы можете цикл по всем путям

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 библиотека, свет и легко поддерживать

источник

2015-07-01 10:30:30 areim

Как я могу анимировать несколько путей SVG?

ответ

Смежные вопросы