大型SVG /拉斐爾圈在動畫時會扭曲

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設置來打開緩衝的信息，但到目前爲止它似乎並沒有被主流瀏覽器所支持。