在Chrome中不正确的鼠标坐标转换为可调整大小的SVG(使用视口)

时间:2014-07-24 07:47:26

标签: svg

示例:http://jsfiddle.net/alekzonder/j2ACr/5/

    var width = 960,  height = 500;

// Append an SVG element
var svg = d3.select('body')
  .append('svg')
  .attr('viewBox', '0 0 ' + width + ' ' + height)
  .attr('width', width)
  .attr('height', height);

svg.append("rect")
.attr('id', 'followMe')
.attr('width', 20)
.attr('height', 20)
.attr('fill', 'peachPuff')
.attr('stroke', 'crimson');

var followRectElement = document.getElementById('followMe');

window.addEventListener('mousemove', function(event) {

        var svgPoint = svg[0][0].createSVGPoint();

        svgPoint.x = event.clientX;
        svgPoint.y = event.clientY;

        svgPoint = svgPoint.matrixTransform(followRectElement.getScreenCTM().inverse());

        followRectElement.setAttribute('x', svgPoint.x - 10);
        followRectElement.setAttribute('y', svgPoint.y - 10);
    });

鼠标移动中矩形中心的光标 - 好的!

不在Chrome中心 - 错误

可能是Chrome中getScreenCTM函数(svg元素)的错误吗?

在Firefox中

,Opera一切正常

0 个答案:

没有答案