Javascript jQuery'；s位置（）。当Raphael JS'；FireFox中的setViewBox更改

我已经包含了一个JSFIDLE，它显示了我在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); 
}

});

左：
var x=1；
r=拉斐尔（“试验”，100100）；
r、 canvas.className.baseVal=“canvas”；
r、 圆圈（40,40,10）；
$（“#滑块”）。滑块({
幻灯片：功能（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：

---

知道为什么要在FireFox中保留更改吗？

我被告知jQuery在SVG元素方面存在问题，如下所示：

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

$（r.canvas）.position（）.left

---

对于document.getElementById（'my_id'）.getBBox（）.x

我被告知jQuery与SVG元素有问题，如下错误所示：

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

$（r.canvas）.position（）.left

使用document.getElementById（'my_id'）.getBBox（）.x