示例: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一切正常