Question

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

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

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

但我如何匹配坐标系？

我想在三角形上的某个点捕捉鼠标位置，并在那些X Y坐标处绘制一个圆，但由于坐标系不匹配，圆圈会被绘制在不同的位置。

因此，在10,10点绘制一个圆，但例如看起来是50,60。

人们如何应对这种情况？

感谢。

最终解决方案：使用JQuery插件绘制圆圈，使用getScreenCTM（）计算点数。

也许我不再需要JQuery插件，但它现在会做。仅使用插件无法看到如何做到这一点。

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

Answer 1

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

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

Answer 2

如果在SVG元素上调用函数getScreenCTM()，它将返回用于将文档坐标转换为屏幕坐标的变换矩阵。您希望转换矩阵用于另一个方向，因此请在矩阵对象上调用inverse()。

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

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

pt = pt.matrixTransform(transform);

Working demo here

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

2 个答案: