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

I’m using the svg jquery plugin by Keith Wood, not the HTML5 canvas.

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

I define my svg image like this to scale my svg triangle image to fit its div container:

但是我如何匹配坐标系?

But how do I then match the coordinate systems?

我想在三角形上的某个点捕获鼠标位置并在这些 X Y 坐标处绘制一个圆，但是由于坐标系不匹配，该圆被绘制在不同的位置.

I want to capture the mouse location at some point over the triangle and draw a circle at those X Y coordinates, but the circle gets drawn in a different location because the coordinate systems don’t match.

因此，将在点 10,10 处绘制一个圆，但例如在 50,60 处.

So a circle would be drawn at point 10,10 but appear to be at 50,60 for example.

人们如何应对这种情况?

How do people cope with this?

谢谢.

最终解决方案:使用JQuery插件绘制圆并使用getScreenCTM()计算点数.

Final Solution: Using the JQuery plugin to draw the circle and getScreenCTM() to calculate the points.

也许我不再需要 JQuery 插件，但现在可以了.仅使用插件看不到如何做到这一点.

Perhaps I no longer require the JQuery plugin but it will do for now. Couldn’t see how to do it using only the plugin.

参见 http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx这是我的示例代码.对于这种用法，getScreenCTM 方法非常有用.

See http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx It’s my sample code. For this usage, getScreenCTM method is very useful.

这篇关于如何在缩放后的 SVG 中将屏幕坐标转换为文档空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2

如何在缩放后的 SVG 中将屏幕坐标转换为文档空间? 为WP2原创文章，链接：https://www.wp2.cn/other/%e5%a6%82%e4%bd%95%e5%9c%a8%e7%bc%a9%e6%94%be%e5%90%8e%e7%9a%84-svg-%e4%b8%ad%e5%b0%86%e5%b1%8f%e5%b9%95%e5%9d%90%e6%a0%87%e8%bd%ac%e6%8d%a2%e4%b8%ba%e6%96%87%e6%a1%a3%e7%a9%ba%e9%97%b4-2/