SVG-анимация с JS - проблемы с преобразованием-происхождением и штрих-кодом

Question

Мне нужно создать датчик скорости с SVG. По мере изменения скорости игла поворачивается, чтобы указать правильную скорость на датчике, и дуга рисуется вокруг окружности измерителя по кончику иглы.

Я попытался использовать три различных библиотек (VelocityJS, SnapSVG и GSAP), чтобы решить проблемы с вращением иглы, но я до сих пор не удалось найти реализацию, которая работает.

Мои первоначальные попытки были с Velocity. Я получил его во всех браузерах, кроме IE. В IE все попытки сменить transform-origin не удались.

Тогда я попытался как SnapSVG и GSAP, но две проблемы продолжают поступать:

1. Вращение иглы в основном работает хорошо, но иногда он вращается в неправильном направлении, под датчик, нет сомневаясь после кратчайшего расстояния до точки.
2. В IE stroke-dashoffset вызывает непредсказуемые результаты.

Я создал CodePen, который показывает поведение калибровочных когда движимый либо из этих трех библиотек.

Любая помощь?

Answer 1

Snap-версия работает отлично для меня, но я предполагаю, что проблема, о которой упоминалось, - это удар-даша, который я не могу проверить в IE.

Одна возможность, если инсульт-dashoffset невозможен, заключается в том, чтобы каждый раз перестраивать строку пути. Использует немного больше ресурсов, но я думаю, что все в порядке.

В противном случае вы можете попробовать нарисовать маску или клип того же размера, что и дуга над ней, и оживить ее, но она также будет использовать больше ресурсов.

Вот решение Snap, каждый раз восстанавливая путь дуги.

Измененный код ...

var arc = Snap.select('#gauge-arc'); 
var arcLength = arc.getTotalLength(); 
var arcString = arc.attr('d'); 
arc.attr({ d: ''}) 

Snap.animate(0,arcLength, function(val) { 
     var arcSubPath = Snap.path.getSubpath(arcString,0,val) ; 
     arc.attr({ d: arcSubPath }); 
    }, 100, function() { 
     Snap.animate(arcLength,0, function(val) { 
      var arcSubPath = Snap.path.getSubpath(arcString,0,val) ; 
      arc.attr({ d: arcSubPath }); 
     },500); 

    }) 
    }, 

Example fiddle (примечание, другие кнопки, вероятно, не будет работать, как я удалил обводки-dashoffset в SVG разметки).