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

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

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

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

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

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

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

     var svg = document.getElementsByTagName('svg')[0]; document.documentElement.addEventListener('mousemove',function(evt){ ... },false); 
  2. В этом обработчике событий преобразуйте координаты мыши (в пикселях) в глобальное пространство вашего документа SVG:

     var pt = svg.createSVGPoint(); pt.x = evt.clientX; pt.y = evt.clientY; var globalPoint = pt.matrixTransform(svg.getScreenCTM().inverse()); 
  3. Преобразуйте глобальную точку в пространство объекта, который вы перетаскиваете:

     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.

направо Dragging Transformed SVG Elements

Showing how to drag points inside a transformation hierarchy.

Для тех, кто использует 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
  • Давайте будем гением компьютера.