如何在缩放的SVG中将屏幕坐标转换为文档空间？ [英] How do you convert screen coordinates to document space in a scaled SVG?

问题描述

我使用Keith Wood的svg jquery插件，而不是HTML5 canvas。

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

 < svg xmlns =http://www.w3.org/2000/svgversion = 1.1width =100％viewBox =0 0 299 215> 
< g> 
 < / g> 
< / svg> 
  

但是，我该如何匹配坐标系？

我想捕捉鼠标在三角形某处的位置，并在这些XY坐标处绘制一个圆，但是由于坐标系不匹配，圆形会在不同的位置绘制。

因此，一个圆圈将在10,10点绘制，但似乎在50,60例如。

人们如何应对

谢谢。

最终解决方案：使用JQuery插件绘制圆和getScreenCTM（）来计算积分。

也许我不再需要JQuery插件，但现在就可以完成了。

  $（'＃cvtriangle .tri'）。on（单击，函数（e）{
 jqsvg = $（'＃cvtriangle'）。svg（'get'）; 
 svg = document.querySelector（svg）; 
 var pt = svg.createSVGPoint（）; 
 pt.x = e.clientX; 
 pt.y = e.clientY; 
 pt = pt.matrixTransform（svg.getScreenCTM（）。inverse（） ）; 
 jqsvg.circle（pt.x，pt.y，5，{class：'vote'，fill：'white'，stroke：'white'，strokeWidth：2，cursor：'pointer'}） ; 
}）; 
  

解决方案

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

 < svg viewBox =0 0 300 300onload =
 var c = document.getElementById（c）; 
 var cx = c.cx.baseVal; 
 var cy = c.cy.baseVal; 
 var svg = this; 
 var point = svg.createSVGPoint（）; 
 svg.onmousemove = function（e）{
 point.x = e.clientX; 
 point.y = e .clientY; 
 var ctm = c.getScreenCTM（）; 
 var inverse = ctm.inverse（）; 
 var p = point.matrixTransform（inverse）; 
 cx.value = px; 
 cy.value = py; 
}; 
> 
< rect width =100％height =100％fill =yellow/> 
 < / svg> 
  

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

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" viewBox="0 0 299 215" >
<g>
<polygon points="1,1 299,1 149,210" fill="blue" stroke="blue" stroke-width="0" class="votenow"/>
</g>
</svg>

But how do I then match the coordinate systems?

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.

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?

Thanks.

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

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.

$('#cvtriangle .tri').on( "click", function(e) {
    jqsvg = $('#cvtriangle').svg('get');
    svg = document.querySelector("svg");
    var pt = svg.createSVGPoint();
    pt.x = e.clientX;
    pt.y = e.clientY;
    pt = pt.matrixTransform(svg.getScreenCTM().inverse());
    jqsvg.circle(pt.x, pt.y, 5, {class: 'vote', fill: 'white', stroke: 'white', strokeWidth: 2, cursor: 'pointer'});
});

解决方案

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 viewBox="0 0 300 300" onload="
    var c = document.getElementById("c");
    var cx = c.cx.baseVal;
    var cy = c.cy.baseVal;
    var svg = this;
    var point = svg.createSVGPoint();
    svg.onmousemove = function(e){
        point.x = e.clientX;
        point.y = e.clientY;
        var ctm = c.getScreenCTM();
        var inverse = ctm.inverse();
        var p = point.matrixTransform(inverse);
        cx.value = p.x;
        cy.value = p.y;
    };
">
    <rect width="100%" height="100%" fill="yellow"/>
    <circle id="c" r="10" fill="blue"/>
</svg>

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