Jquery SVG преобразование странное поведение - PullRequest
0 голосов
/ 23 марта 2012

Я пытаюсь повернуть SVG <polygon> (или любой другой элемент), используя это:

var svg = new $.svg._wrapperClass($('#test'));
$(svg._svg).animate({svgTransform: 'rotate(720,100,100)'}, 2000);​

Полигон действительно меняет свой угол, но с какой-то странной траекторией движения.Пожалуйста, перейдите по этой ссылке, чтобы увидеть: http://jsfiddle.net/ExaBP/

Моя цель - заставить многоугольник вращаться вокруг его центра.

1 Ответ

0 голосов
/ 27 марта 2012

Проблема в том, что центр вращения вашего многоугольника находится на координате (0,0)> посмотрите на точки:

points="38.8313,102.22 42.1242,104.613 45.4171,107.005 44.1593,110.876 42.9015,114.747 38.8313,114.747 34.7611,114.747 33.5034,110.876 32.2456,107.005 35.5384,104.613"

Итак, если вы используете (cx, cy) для вращения в animate , эти параметры также являются анимированными, от 0 до 100, затем до 0.

Вы должны изменить центр до и после анимации.

Но здесь, я думаю, вынужен другой подход:

  • Попробуйте создать свой SVG непосредственно в HTML или JS
  • или , прежде чем изменять источник координат в вашей программе рисования, прежде чемэкспорт.
...