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

问题描述

我使用的是 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:

  <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?

我想在三角形上的某个点捕获鼠标位置并在这些 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.

$('#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'});
});

推荐答案

参见 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 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屋！