1

我已经包含了一个 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 中留下更改吗？

4

1 回答 1

1

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

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

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

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

与 document.getElementById('my_id').getBBox().x

于 2013-06-22T03:57:47.533 回答