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 には viewBox があり、 viewBox 変換は子孫にのみ適用され、要素自体には適用されないため、 svgElement は svgPoint とは異なる座標系にあります。残念ながら、IE と Chrome はここで SVG 仕様に準拠していないため、多くの混乱が生じます。

上記の行の代わりに、これを書くことができます

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

followRectElement は必要な座標系にあるため、クロスブラウザーで機能するソリューションです。

于 2013-10-31T21:09:12.773 に答える