Javascript 设置动画时，大SVG/Raphael圆会扭曲

我正在用拉斐尔制作一个圆的动画。当圆很大的时候，当它移动的时候，我会在圆的周围产生伪影。这似乎是一个剪辑/重画区域的问题，想知道是否有解决办法

它在firefox中看起来还行（如果有点不稳定的话），在Chrome中看起来非常可靠。在填充属性上使用不透明度也会加剧这种情况，即

rgba（255,0,0,0.7）

下面是一个显示问题的示例。只需在右侧的纸张周围单击，即可移动圆圈

代码：

---

缓冲是一种用于防止动画瑕疵（如JamWaffles所指出的撕裂）的技术。如果您查看对的答案，您将找到有关SVG设置以启用缓冲的信息，但到目前为止，主要浏览器似乎不支持该设置。

缓冲是一种用于防止动画瑕疵（如JamWaffles所指出的，撕裂）的技术。如果您查看对的回答，您会发现有关SVG设置以打开缓冲的信息，但到目前为止，主要浏览器似乎不支持该设置。

我认为您正在经历的是。我认为您正在经历的是。

var discattr = {
    fill: "#666",
    stroke: "none",
    width: 35
};

var paper = Raphael("svgcontainer", 400, 400);

circle = paper.circle(150, 150, discattr.width, discattr.width).attr({
    stroke: "none",
    fill: "rgba(255,0,0,0.7)"
});

var coords = []

var animateCircle = function(coords) {
   if (!coords.length) return;
   var nextCoords = coords.shift()
   var move = Raphael.animation(nextCoords, 500, "linear", function() {animateCircle(coords)});
   circle.animate(move);
}    

$("#svgcontainer").on("mouseup", function(e) {
    coords.push({cx: e.pageX, cy: e.pageY})

    animateCircle(coords);
});