javascript - 大型 SVG/Raphael 圆在动画时会变形

Question

我正在使用 Raphael 制作一个圆圈动画。当圆圈很大时，当圆圈移动时，我会在圆圈周围出现伪影。这似乎是剪切/重绘区域问题，想知道是否有解决方法？

它在 Firefox 中似乎没问题(如果有点生涩)，并且在 Chrome 中显示得非常可靠。在填充属性上使用不透明度也会加剧这种情况，即 rgba(255,0,0,0.7)

这是一个jsFiddle显示问题。只需单击右侧纸张周围即可移动圆圈。

代码:

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);
});

Answer 1

缓冲是一种用于防止动画伪影(撕裂，正如 JamWaffles 指出的那样)的技术。如果你看this Stack Overflow question的答案您会找到有关打开缓冲的 SVG 设置的信息，但到目前为止，主要浏览器似乎不支持它。