Я использую библиотеку 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 })
}