html5变换矩阵,html5 – SVG坐标与变换矩阵

我已经创建了一个工作示例，我相信你在我的网站上描述这里：

http://phrogz.net/svg/drag_under_transformation.xhtml

通常，通过以下方式将鼠标光标转换为对象的本地空间：

>创建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 );

对于Stack Overflow后代，这里是我的SVG XHTML演示的完整来源(如果我的网站失效)：

Dragging Transformed SVG Elements

html,body {

background:#eee; margin:0;

user-select:none; -moz-user-select:none; -webkit-user-select:none;

}

p { margin:0.5em; text-align:center }

svg {

position:absolute; top:5%; left:5%; width:90%; height:90%;

background:#fff; border:1px solid #ccc

}

svg rect { stroke:#333 }

svg .drag { cursor:move }

svg .sizer { opacity:0.3; fill:#ff0; stroke:#630;}

#footer {

position:absolute; bottom:0.5em; margin-bottom:0;

width:40em; margin-left:-20em; left:50%; color:#666;

font-style:italic; font-size:85%

}

#dragcatch { position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1}

Showing how to drag points inside a transformation hierarchy.

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">

class="drag resize" x="50" y="30" width="50" height="30" fill="#69c" />

Copyright © 2011 Gavin Kistner.

Comments/criticisms welcome.