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

  • семантическое масштабирование диаграммы направленности силы в d3
  • Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?
  • Угловые и SVG-фильтры
  • Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, щелкните)
  • Есть ли способ использовать SVG как контент в псевдоэлементе: до или: после
  • Повернуть текст оси x в d3
  • Оттенок SVG отключен
  • Преобразование SVG в PDF
  • Добавить текст / метку на ссылки в графе D3 force
  • Экспорт графов Excel в виде файлов векторной графики (например, SVG)?
  • Как преобразовать SVG в PDF в Linux
  • Interesting Posts

    Как сопоставить IP-адрес на localhost?

    Spring Boot как скрыть пароли в файле свойств

    Параллелизировать скрипт Bash с максимальным количеством процессов

    Есть ли способ узнать, отображается ли мягкая клавиатура?

    Как использовать внешнюю библиотеку без машинописного текста из машинописного текста без .d.ts?

    Производительность вложенного урожая в дереве

    Как получить список файлов в каталоге с помощью C или C ++?

    Почему AddRange быстрее, чем использование цикла foreach?

    Почему я должен использовать IHttpActionResult вместо HttpResponseMessage?

    Как я могу запускать скрипт всякий раз, когда подключаю внешний монитор?

    как сделать мастер с ASP.Net MVC

    Настройка разрешений для определенных пользователей и групп в Linux

    Нужно ли автозаполнение механизма просмотра бритвы работать в библиотеке classов?

    Алгоритм повернуть массив в линейном времени

    Как добавить виртуальные сетевые адаптеры на мой Linux-ПК, чтобы они отображали свои MAC-адреса в домене ISP?

    Давайте будем гением компьютера.