Как вращать SVG с анимацией с помощью библиотеки svg.js? - PullRequest
0 голосов
/ 11 февраля 2019

Я использую библиотеку svg.js для анимации в svg.Я создал круглый циферблат, на котором вращение должно происходить по щелчку указателя (по углу).Код для поворота после нажатия на указатель, угол определяет угол нажатого указателя:

   function moveHotspotPointer(angle) {
    if (currentBrowser == "ie") {
        var hp = SVG.get('hotspot-pointer');
        hp.rotate(angle, 50, 50);
        // hp.transform({ rotation: 125, cx: 50, cy: 50 })
    } 
   }

Поворот должен происходить от текущего угла до угла нажатого указателя с продолжительностью анимации.Я определил точки поворота 50, 50 в приведенном выше коде, но в браузере * edge указатель не вращается в точках поворота (круговой путь), которые определены, вместо этого он прыгает прямо к нажатому указателю, и указатель можно увидеть перемещающимся междуциферблат, указатель должен вращаться на круговом циферблате.

В браузере IE и по краю мне также нужна некоторая длительность вращения, что означает, что если я нахожусь под углом 210, а событие щелчка происходит на углу 300, то поворот долженпроисходит от 210 до 300, но в моем случае анимация сначала вращается по полной шкале, а затем возвращается к точке, где происходит событие щелчка.Я использовал метод animate до поворота, но в браузере IE указатель поворачивает полный круговой круг, а затем возвращается к нажатому указателю.Вращение должно происходить от текущего угла до угла щелчка.Код с методом анимации:

if (currentBrowser == "ie" || currentBrowser == "edge") {
    var hp = SVG.get('hotspot-pointer');
    hp.animate(500).rotate(angle, 50, 50);
    // hp.transform({ rotation: 125, cx: 50, cy: 50 })
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...