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

семантическое масштабирование диаграммы направленности силы в d3

Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?

Угловые и SVG-фильтры

Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, щелкните)

Есть ли способ использовать SVG как контент в псевдоэлементе: до или: после

Повернуть текст оси x в d3

Оттенок SVG отключен

Преобразование SVG в PDF

Добавить текст / метку на ссылки в графе D3 force

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

Как преобразовать SVG в PDF в Linux