SVG - Бесконечное вращение принимает точку неправильно центр

Я сделал codepen с защелкой: SVG Codepen SVG - Бесконечное вращение принимает точку неправильно центр

Я пытаюсь повернуть SVG-шестерню в бесконечной петле вокруг своей собственной центральной точки. Это работает в Internet Explorer, но не работает в Mozilla-Firefox и Google-Chrome.

Центральная точка в Chrome и Firefox кажется неправильной, поэтому механизм выходит из положения.

Для вращения я использовал следующий код:

function infRotate(el, time, cw) { 
     var box = el.getBBox(); 
     el.transform('r0,' + box.cx + ',' + box.cy); 
     if (cw) 
      el.animate({transform: 'r360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw)); 
     else 
      el.animate({transform: 'r-360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw)); 
    }

Что я должен сделать для Firefox и Chrome, чтобы найти правильную точку центра? Спасибо за помощь.

источник

2015-08-05 Joel Geiser

Не полагайтесь на красный прямоугольник, я не уверен, откуда это взялось. Это устанавливается отдельно. Путь находится внутри группы, которая повернута/масштабирована/переведена, а rect не находится внутри группы. Если вы посмотрите на bbox группы и путь, вы увидите, что они разные. Я не уверен, что это проблема, просто отметив, что это может быть что-то проверить. – Ian

Я хочу только вращать передачу, но остаюсь на некотором положении. Красный прямоугольник я нарисовал только, чтобы показать лучше, что шестерня изменит его положение X/Y (и это я не хочу). Если вы сохраните локальный SVG-код и откройте его с помощью inkscape или иллюстратора, вы увидите, что прямоугольник и шестерка ar центрированы, чтобы страница не была сгруппирована. –

Ну, похоже, сейчас работает нормально, я думаю, вы удалили преобразование из группы? – Ian

Найдено решение основано на комментарии пользователя @ lan.

Передача была в группе, которая содержит преобразование X/Y. Поэтому я пытаюсь удалить каждую группу и слой в файл svg. Чтобы четко видеть вложенность объектов, я работаю с XML-редактором в Inkscape.

Каждый объект должен быть перемещен в исходное положение с использованием преобразования relativ. Использование релятивистских движений предотвращает inkscape для печати атрибутов переводов для групп.

шаги, чтобы переместить объект relativ в Inkscape:

Перейти к Edit -> Select All во всех слоях
Перейти к объекту -> Transform

В Transform панели:

Uncheck Относительное перемещение и установите флажок Применить к каждому объекту отдельно объекта
Переместить в Конечное положение

После очистки файла SVG, светлячок и хром вычислить правильные значения слишком и передача теперь хорошо вращение (см обновленного кода на codpen)

Может быть, есть лучшее решение, чтобы сказать Inkscape не работает с трансформационными-атрибутами, но я не нашел еще.

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

источник

2015-08-06 14:39:44

Joel кроме брать центр используя коробка.cx и коробка.cy. возьмите центр, разделив ширину и высоту контейнера на 2, а затем установите с ним.

источник

2015-08-05 10:07:05

Почему это было бы иначе? –

Хмм-й результат, используя половину ширины и высоты. Если я распечатаю значения, у меня есть (firefox) 'box.width/2 = 77.12982648229425 box.height/2 = 79.57228499999968 box.cx = 111.59683051770574 box.cy = 945.9807149999995' Почему у меня разные значения, даже если шестерня квадратная (ширина = высота)? –

Вы можете получить неправильный результат, если x и y отличны от нуля. Чтобы сделать это правильно: 'cx = box.width/2 + box.x;' и 'cy = box.height/2 + box.y'. –

SVG - Бесконечное вращение принимает точку неправильно центр

ответ

Смежные вопросы