Как преобразовать / повернуть точки пути SVG

Я повернул элемент пути SVG, установив атрибут transform="rotate(45)"

Теперь, как я могу получить повернутые точки пути SVG?

Когда я проверил атрибут «d», он по-прежнему показывает исходные точки [без поворота].


svg jquery-svg
person George Neil    schedule 22.11.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

если вы получаете точку через path.getPointAtLength(), вам нужно применить преобразование пути к результату. Вы получаете полное преобразование:

var t = path.getTransformToElement( path.ownerSVGElement );
var abspoint = path.getPointAtLength( 0.5 ).matrixTransform( t );

Я не тестировал это, но может быть так...

Это хорошо для некоторых точек пути. Если весь список данных пути должен быть преобразован в абсолютный, то raphael может быть самым быстрым решением...

person philipp    schedule 22.11.2012
comment
Это очень неэффективный способ сделать это, в основном преобразует путь в сегменты прямой линии. Это также сделает плавные кривые блочными, если вы увеличите масштаб. - person Erik Dahlström; 22.11.2012
comment
Это сработало для меня. Есть опечатка. это должно быть матричное преобразование. В примере код 'r' отсутствует - person George Neil; 23.11.2012

arrow_upward
3
arrow_downward

В самом svg нет такой функциональности. Нет и в jQuery, насколько я знаю.

Библиотека javascript Raphaël содержит служебный метод для того, что вам нужно, см. Raphael.transformPath.

person Erik Dahlström    schedule 22.11.2012