Html 如何在缩放SVG中将屏幕坐标转换为文档空间？

我使用的是Keith Wood的svg jquery插件，而不是HTML5画布

我这样定义svg图像以缩放svg三角形图像以适合其div容器：

请参见 这是我的示例代码。 对于这种用法，getScreenCTM方法非常有用

---

如果在SVG元素上调用函数

getScreenCTM（）

，它将返回用于将文档坐标转换为屏幕坐标的转换矩阵。您需要另一个方向的变换矩阵，因此对矩阵对象调用

inverse（）

var transform = svg.getScreenCTM().inverse();

现在可以变换点对象以进行最终转换：

pt = pt.matrixTransform(transform);

var x=document.getElementById（“x”）， y=document.getElementById（“y”）， svg=document.querySelector（“svg”）； addEventListener（“mousemove”，函数（evt）{ var pt=svg.createSVGPoint（）； pt.x=evt.pageX； pt.y=evt.pageY； pt=pt.matrixTransform（svg.getScreenCTM（）.inverse（））； x、 innerHTML=pt.x； y、 innerHTML=pt.y； }，假）

#容器{
宽度：200px；
高度：200px；
}
div{
浮动：左；
左边距：1米；
}

x=

y=

OK，我使用您的示例代码获得了映射，并使用JQuery SVG插件绘制了圆圈。出于某种原因，pt.x=evt.pageX不起作用，但pt.x=evt.clientX起作用，所以我使用了defghi1977的答案。干杯，谢谢你的详细回答。