当元素被翻译时，渐变填充不会按预期的方式显示

Question

当翻译raphael元素并在翻译结束时更改填充渐变（如可能会显示对象被选中时）时，会出现奇怪的行为。如果该对象只是“点击”（不翻译或拖动）的梯度变化工作正常。当对象翻译时，渐变看起来不正确。

问题在代码中可以看出：

var paper = Raphael('page', '100%', '100%'); 
var blocks = paper.set(); 

var base = {"fill": "90-#aaa:5-#fff:95"}  
var selected = {"fill": "90-#a99:5-#faa:95"}  

var r = paper.rect(10 + 200, 10, 100, 50, 10).attr(base); 

r.drag(
    function(dx, dy) { 
     this.translate(dx-this.ox,dy-this.oy); 

     this.ox = dx; 
     this.oy = dy; 
    }, 
    function(x, y) { 
     this.ox = 0; 
     this.oy = 0;  
    }, 
    function() { 
     r.attr(selected); 
    } 
); 

的jsfiddlehttp://jsfiddle.net/gnarlybear/Lr5fz/

• 拖动箱子下来，它原来多为灰
• 重新启动脚本，单击框和他似乎是正确的梯度
• 重新启动，将框拖动到 它变成r编辑

这是应该如何工作（也许梯度应用到更广泛的领域）？如果是这样，拖动元素时如何显示渐变显示？

Answer 1

我把范围缩小一些：当你调用translate然后attr发生http://jsfiddle.net/Lr5fz/16/

问题。出于某种原因，反向平移应用于lineargradient元素上的gradientTransform。

对于进一步bugtracing开始从源头上线722-839：https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js