Question

我已经包含了一个jsfiddle，显示我在Firefox中使用jQuery和Raphael时遇到的问题。当我移动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的变化吗？

Answer 1

我被告知jQuery存在SVG元素问题，如此错误所示：

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

解决我的问题的解决方案是使用SVG元素的边界框而不是jQuery位置。所以，我替换了每一个

$（r.canvas）.POSITION（）。左

with document.getElementById（'my_id'）。getBBox（）。x

当Raphael JS的setViewBox在FireFox中发生变化时，jQuery的位置（）

1 个答案: