小编Jon*_*Jon的帖子

我正在使用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>

但是,我如何匹配坐标系？

我想在三角形上的某个点捕获鼠标位置,并在这些XY坐标处绘制一个圆,但由于坐标系不匹配,因此圆绘制在不同的位置.

因此,在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'});
});