анимированный SVG + кросс-браузер совместимость

Question

У меня возникли проблемы с анимированными SVG я создал с помощью http://lazylinepainter.info/

В Chrome он работает отлично. Однако в Safari, Firefox и iOS анимация показывает конечные точки крестов в виде точек. Вот моя скрипка:

http://jsfiddle.net/ric0c/aqn6zkf4/1/

и вот мой код SVG:

var pathObj2 = { 
     "strategy": { 
      "strokepath": [ 
       { 
        "path": " M22.5,59.6c10.8,0,19.5,8.7,19.5,19.5s-8.7,19.5-19.5,19.5S3,89.8,3,79.1c0-10.7,8.7-19.4,19.4-19.5", 
        "duration": 600 
       }, 
       { 
        "path": " M177.4,3c10.8,0,19.5,8.7,19.5,19.5S188.2,42,177.4,42s-19.5-8.7-19.5-19.5c0-10.7,8.7-19.4,19.4-19.5", 
        "duration": 600 
       }, 
       { 
        "path": " M113.5,155.6c10.8,0,19.5,8.7,19.5,19.5c0,10.8-8.7,19.5-19.5,19.5S94,185.8,94,175.1c0-10.7,8.7-19.4,19.4-19.5", 
        "duration": 600 
       }, 
       { 
        "path": " M200.1,57.1c10.8,12.5,17.3,28.8,17.3,46.6c0,39.4-31.9,71.3-71.3,71.3", 
        "duration": 600 
       }, 
       { 
        "path": "M 141.2 73.7 L 166.2 98.7", 
        "duration": 600 
       }, 
       { 
        "path": "M 166.2 73.7 L 141.2 98.7", 
        "duration": 600 
       }, 
       { 
        "path": "M 78.2 116.1 L 103.2 141.1", 
        "duration": 600 
       }, 
       { 
        "path": "M 103.2 116.1 L 78.2 141.1", 
        "duration": 600 
       }, 
       { 
        "path": "M 235.2 142.1 L 260.2 167.1", 
        "duration": 600 
       }, 
       { 
        "path": "M 260.2 142.1 L 235.2 167.1", 
        "duration": 600 
       }, 
       { 
        "path": "M 196.1,76.7 200.1,57.1 219.7,61.1 L 196.1,76.7 200.1,57.1 219.7,61.1 ", 
        "duration": 600 
       } 
      ], 
      "dimensions": { 
       "width": 264, 
       "height": 198 
      } 
     } 
    }; 

    $('#strategy').lazylinepainter({ 
     "svgData": pathObj2, 
     "strokeWidth": 6, 
     "strokeColor": "#FFFFFF", 
     'onComplete' : function(){ 
      setTimeout(function() { 
        $('#strategy').lazylinepainter('erase'); 
        $('#strategy').lazylinepainter('paint'); 
       }, 5000); 
      } 
    }).lazylinepainter('paint'); 


    var state = 'paint'; 
    $('#strategy').lazylinepainter(state); 

Любая помощь о том, как устранить эти точки будут оценены.

Answer 1

Это похоже на ошибку в FF (IMO в любом случае). Он не должен рисовать линии endcaps, если линия заканчивается точно на конечной точке тире.

Одним из быстрых решений является замена шариковых крышек на «прикладом».

'strokeCap': 'butt', 

Это работает как минимум на Firefox. Я не могу проверить, работает ли это в Safari.

Если вы хотите сохранить круглые колпачки, тогда обходным путем следует убедиться, что линии не начинаются и не заканчиваются точно на конечной точке dasharray. Измените эти две строки в функции paint().

path.style.strokeDasharray = length + ' ' + (length+2); 
path.style.strokeDashoffset = (length+1); 

http://jsfiddle.net/aqn6zkf4/3/