SVG-координаты с матрицей преобразования
Я хочу реализовать такие функции, как svg-edit на элементе прямоугольника
- Повернуть прямоугольник
- Изменение размера
- Бремя
Вращая прямоугольник SVG, он работает отлично, но когда я хочу resize прямоугольника, у него есть проблема. Координаты не работают правильно; Я использую матрицу преобразования для поворота targetelement.setAttribute(transform,rotate(45,cx,cy))
но когда элемент был повернут, координаты перемещаются. Я также использую inverse
функцию для инверсии матрицы преобразования, которая решает проблему, но не работает с функцией перетаскивания.
- Как разрезать отверстие в прямоугольнике SVG
- Прозрачный полый или вырезанный круг
- Волна (или форма?) С рамкой на CSS3
- Изображение SVG не работает в Firefox
- Доступность: рекомендуемое соглашение об альт-тексте для SVG и MathML?
- Прозрачный текст, вырезанный из фона
- Рисуем SVG на canvasе HTML5 с поддержкой элемента font
- Цвет фона текста в SVG
- Как преобразовать / сохранить график d3.js в pdf / jpeg
- Как я могу конвертировать SVG-файлы, содержащие текст в файлы PDF (в частности, CentOS 5.3 x86_64)?
- Вставить SVG в SVG?
- Как установить ширину штриха: 1 только на определенных сторонах SVG-фигур?
- Приложение jquery не работает с элементом svg?
Я создал рабочий пример того, что, как я считаю, вы описываете на моем сайте здесь:
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.
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