Snap svg неправильно вычисляет длину path

#html5 #svg #css_animation #svg_animation #snapsvg

Вот пример.    

Я пытаюсь сделать анимацию для 'path', используя атрибуты dasharray \ dashoffset.
Но Snap Svg неправильно вычисляет длину path.   

Svg изображение, создано с помощью составного контура в Adobe Illustrator.
Я что-то неправильно делаю, или это bug, о котором я должен сообщить?   

Есть ли способ рассчитать длину правильно? 



/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length

path.attr({
  "stroke-dashoffset": 0,
  "stroke-dasharray": pathLength
});

$("#total").text(pathLength);

/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
  path.attr({
    'stroke-dashoffset': value
  });
  $("#len").text(value);
}, 5000, mina.easeinout);

/*Second svg*/
var path2 = Snap('#svg2 path');
var selectedLength = 112; //select length by playing with styles in browser
path2.attr({
  "stroke-dashoffset": 0,
  "stroke-dasharray": selectedLength
});

$("#total2").text(selectedLength);

Snap.animate(0, selectedLength, function(value) {
  path2.attr({
    'stroke-dashoffset': value
  });
  $("#len2").text(value);
}, 5000, mina.easeinout);
.wrap {
  width: 100px;
  float: left;
  margin: 0 20px 0 0;
}

#svg,
#svg2 {
  fill-opacity: 0;
  stroke: #000;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.body:after {
  content: '';
  clear: both;
  display: block;
}

.panel {
  font-family: Arial;
  line-height: 1.3em;
}



  

    
  
  

    
Length calc by Snap.path.getTotalLength
    

    
Stroke dashoffset during animation
    

  


  

    
  
  

    
Length selected by me testing in browser
    

    
Stroke dashoffset during animation
    

  




    

Ответы

Ответ 1

Анимация svg изображения, нарисованная одним пером. Между анимациями нет паузы.








Ниже пример анимация SVG иконки,выполненной несколькими патчами, поэтому рисование
идет одновременно несколькими перьями. Обратите внимание, что между анимациями из-за
одновременного рисования появилась пауза, которая равна разнице по времени между рисованием
одним пером и рисованием несколькими перьями одновременно.   






Ответ 2

Я пытаюсь сделать анимацию для 'path', используя атрибуты dasharray \
  dashoffset.    


Немного теории:

Эффекты рисования с чистого листа или наоборот плавное стирание линий достигаются
использованием приема, когда взаимодействуют между собой:  


stroke-dasharray = TotalLength()
stroke-dashoffset = TotalLength(), где 

stroke-dasharray(5 5) - прерывистая линия с длиной штриха и пробелами между ними
равно 5 пикселей. При равенстве этих двух параметров можно записывать stroke-dasharray(5)     


stroke-dashoffset - отступ от начала линии    

TotalLength - полная длина линии.     

Поэтому рисование с чистого листа начнется, при начальном условии, когда длина линии
будет равна отступу от начала линии.   Отступ постепенно уменьшается и линия растёт. 
При стирании линии - отступ будет постепенно увеличиваться.     


  Есть ли способ рассчитать длину правильно?     


Есть, но и нюансы тоже есть.    

    


Ниже пример как рассчитать длину для вашего примера.
 В принципе решение подойдет для других файлов SVG, для этого нужно будет, только
подставлять свои значения в параметр "d"  Path




  

  
   
 
   


    

Ниже реализация анимации стирания линий. Начало анимации- клик по иконке.   






Ответ 3

Решение JS

Такую иконку, как у вас, одним патчем d="M..." не нарисовать. Так как есть переходы
от одного замкнутого контура к другому, и если не будет второго "M" (moveto) переход
ко второму контуру с поднятием пера, то будут соединяющие линии между замкнутыми контурами.     








Выход один - прятать паузу. В этом скрипте, хоть финальных точек не остается по сравнению
с применением библиотеки snap.svg


Ответ 4

Спасибо Alexandr_T. Он объяснил с точки зрения теории почему анимация ломалась. Я
переписал составной path в несколько маленьких pathов. Начало каждого pathа начинается
с d="M..." (moveto). Правки сделал в блокноте. Вот код с использованием Snap SVG. 



/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length

path.attr({
    "stroke-dashoffset": 0,
    "stroke-dasharray": pathLength
});

$("#total").text(pathLength);

/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
    path.attr({
        'stroke-dashoffset': value
    });
    $("#len").text(value);
}, 5000, mina.easeinout);

/*Second svg*/
var svg2 = Snap('#svg2');
var paths = svg2.selectAll("path");
var maxLength = 0;
var tempLength = 0;

for (key in paths.items) {
    tempLength = Snap.path.getTotalLength(paths.items[key]);
    if (maxLength < tempLength) {
        maxLength = tempLength;
    }
}

svg2.attr({
    "stroke-dashoffset": 0,
    "stroke-dasharray": maxLength
});

$("#total2").text(maxLength);

Snap.animate(0, maxLength, function(value) {
    svg2.attr({
        'stroke-dashoffset': value
    });
    $("#len2").text(value);
}, 5000, mina.easeinout);
.wrap {
    width: 100px;
    float: left;
    margin: 0 20px 0 0;
}

#svg,
#svg2 {
    fill-opacity: 0;
    stroke: #000;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.body:after {
    content: '';
    clear: both;
    display: block;
}

.panel {
    font-family: Arial;
    line-height: 1.3em;
}



    

        
    
    

        
Length calc by getTotalLength() from combined path
        

        
Stroke dashoffset during animation
        

    


    

        
    
    

        
I rewrite compound path to small paths. Begining of each path is d="M..."
(moveto)
        
Max length of svg paths getted by getTotalLength();
        

        
Stroke dashoffset during animation