SVG-координаты с матрицей преобразования

Я хочу реализовать такие функции, как svg-edit на элементе прямоугольника

Повернуть прямоугольник
Изменение размера
Бремя

Вращая прямоугольник SVG, он работает отлично, но когда я хочу resize прямоугольника, у него есть проблема. Координаты не работают правильно; Я использую матрицу преобразования для поворота targetelement.setAttribute(transform,rotate(45,cx,cy)) но когда элемент был повернут, координаты перемещаются. Я также использую inverse функцию для инверсии матрицы преобразования, которая решает проблему, но не работает с функцией перетаскивания.

Я создал рабочий пример того, что, как я считаю, вы описываете на моем сайте здесь:
http://phrogz.net/svg/drag_under_transformation.xhtml

В общем, вы конвертируете курсор мыши в локальное пространство объекта:

Создание mousemove события mousemove :

 var svg = document.getElementsByTagName('svg')[0]; document.documentElement.addEventListener('mousemove',function(evt){ ... },false);

В этом обработчике событий преобразуйте координаты мыши (в пикселях) в глобальное пространство вашего документа SVG:
```
 var pt = svg.createSVGPoint(); pt.x = evt.clientX; pt.y = evt.clientY; var globalPoint = pt.matrixTransform(svg.getScreenCTM().inverse()); 
```
Преобразуйте глобальную точку в пространство объекта, который вы перетаскиваете:
```
 var globalToLocal = dragObject.getTransformToElement(svg).inverse(); var inObjectSpace = globalPoint.matrixTransform( globalToLocal ); 
```

Для потомков переполнения стека, вот полный источник моей демонстрации SVG + XHTML (в случае, если мой сайт не работает):

    Dragging Transformed SVG Elements   Showing how to drag points inside a transformation hierarchy.
   Copyright © 2011 Gavin Kistner. Comments/criticisms welcome. 
  
  направо    Dragging Transformed SVG Elements   Showing how to drag points inside a transformation hierarchy.
   Copyright © 2011 Gavin Kistner. Comments/criticisms welcome.

Для тех, кто использует Chrome, добавьте следующие строки после

 var pt = svg.createSVGPoint(); SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

Больше информации здесь: https://github.com/cpettitt/dagre-d3/issues/202

Измените файл svg с помощью jQuery

Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?

В чем разница между canvasом SVG и HTML5?

Рисование SVG-файла на canvasе HTML5

Пакетное преобразование изображений SVG в нужный размер PNG или ICO

Быстрые и гибкие интерактивные диаграммы / графики: SVG, Canvas, другое?

Как разместить треугольники стрелки на линиях SVG?

атрибут svg viewBox

SVG: текст внутри прямоугольника

Экспорт графов Excel в виде файлов векторной графики (например, SVG)?

SVG для Android Shape