Странное поведение преобразования Jquery SVG

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

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

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

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


person MDI    schedule 23.03.2012    source источник
comment
попробуйте отобразить фигуры с помощью другого приложения, например inkscape, и посмотрите, изменится ли что-нибудь.   -  person Eliran Malka    schedule 23.03.2012
comment
Движение выглядит так, как будто эта анимация анимируется не только через 720, но и через значения x и y. вот почему это спираль.   -  person Andrew    schedule 23.03.2012
comment
Андрей, ты видел код. Есть только поворот.   -  person MDI    schedule 23.03.2012
comment
Рендеринг в Inkskape не помогает. Та же картина.   -  person MDI    schedule 24.03.2012


Ответы (1)


Проблема в том, что центр вращения вашего многоугольника находится на координате (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.
  • или попробуйте изменить начало координат в вашей программе рисования перед экспортом.
person Akarun    schedule 27.03.2012
comment
Знаете ли вы, как правильно изменить координаты в Inskape или CorelDRAW? - person MDI; 28.03.2012
comment
Я не могу сделать svg в html или js, потому что мой настоящий svg намного сложнее, чем полигон с рамкой. - person MDI; 28.03.2012
comment
В самом деле... Еще одно решение - установить многоугольник с центром и переместить его после в нужное положение в вашей композиции. См. по адресу: w3.org/TR/SVG/coords.html#EstablishingANewUserSpace И, по крайней мере, у тебя есть объяснение, нет? - person Akarun; 28.03.2012