1

Firefox の jQuery と Raphael で発生している問題を示す jsfiddle を含めました。jQuery UI スライダーを動かすと、Raphael キャンバスの円が大きくなります。スライダーの下に、キャンバスの左の位置を出力します。Chrome と Internet Explorer では、スライダーを動かしても左は一定のままです。ただし、FireFox では、スライダーを前後に動かすと左が変化します。

<div id="test"></div>
<div id="slider"></div>
<div id="left1">left: <span id="left2"></span></div>

var x = 1;
r = Raphael('test', 100, 100);
r.canvas.className.baseVal="canvas";
r.circle(40,40,10);
$('#slider').slider({

slide: function (e, ui){
x = ui.value;
    r.setViewBox((r.canvas.getAttribute('width')/2) -((r.canvas.getAttribute('width')*.5)/x), (r.canvas.getAttribute('height')/2) - ((r.canvas.getAttribute('height')*.5)/x), r.canvas.getAttribute('width')/x, r.canvas.getAttribute('height')/x);

$('#left2').text($(r.canvas).position().left); 
}

});

jsFiddle: http://jsfiddle.net/XfQgV/15/

なぜ FireFox に変更を残したのか？

4

1 に答える 1

1

このバグで示されているように、jQuery には SVG 要素に関する問題があることを知らされました。

http://bugs.jquery.com/ticket/9797

私の問題を解決する解決策は、jQuery の位置の代わりに SVG 要素の境界ボックスを使用することです。だから、私はすべてを交換しました

$(r.canvas).position().left

document.getElementById('my_id').getBBox().x を使用

于 2013-06-22T03:57:47.533 に答える