2

当我尝试获取鼠标位置时，我对 Firefox v25 没有什么问题。当我使用 2 svg 嵌套时，FF 不会返回正确的位置，但在 Chrome 和 IE10 中工作正常。

这是一个例子：http: //jsfiddle.net/LwZFb/

<div class="position">
    <div>client position <span id="clientPosition"></span></div>
    <div>svg position <span id="svgPosition"></span></div>
</div>
<svg id="test1" version="1.1" viewBox="0 0 500 500" width="500px" height="500px">
<svg id="testSVG" preserveAspectRatio="none" version="1.1" viewBox="0 0 1000 1000" width="500px" height="500px">
    <rect fill="papayaWhip" x="250" y="250" width="500" height="500"/>
    <text x="225" y="240">250/250</text>
    <text x="725" y="240">750/250</text>
    <text x="225" y="775">250/750</text>
    <text x="725" y="775">750/750</text>
    <rect id="followMe" fill="peachPuff" stroke="crimson" width="20" height="20"/>
</svg>
</svg>

以及获取职位的js代码：

var svgElement = document.getElementById('testSVG'),
followRectElement = document.getElementById('followMe'),
clientPositionElement = document.getElementById('clientPosition'),
svgPositionElement = document.getElementById('svgPosition');

window.addEventListener('mousemove', function(mouseEvent) {
    var svgPoint = svgElement.createSVGPoint();

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

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

    clientPositionElement.innerHTML = [ mouseEvent.clientX, mouseEvent.clientY ].join('/');
    svgPositionElement.innerHTML = [ svgPoint.x, svgPoint.y ].join('/');

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

1 回答 1

1

啊，但是 Firefox 确实给出了正确的位置，其他浏览器和您的算法是问题所在。这是问题线...

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

svgElement 与 svgPoint 处于不同的坐标系中，因为 svgElement 有一个 viewBox 并且viewBox 变换只适用于后代，而不适用于元素本身不幸的是，IE 和 Chrome 不遵守 SVG 规范，这会导致很多混乱。

而不是上面的行，你可以写这个

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

由于 followRectElement 位于您想要的坐标系中，因此该解决方案可以跨浏览器工作。

于 2013-10-31T21:09:12.773 回答