要素が変換されたときに勾配塗りが期待どおりに表示されない

Question

raphael要素を変換して翻訳の最後に塗りつぶし勾配を変更すると、オブジェクトが選択されているように見えることがあります。オブジェクトがちょうど "クリック"されている（変換またはドラッグしていない）場合、グラデーションの変更はうまくいきます。オブジェクトが変換されると、グラデーションは正しく表示されません。

問題は、このコードで見ることができ

：http://jsfiddle.net/gnarlybear/Lr5fz/

• ドラッグダウンボックス

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

  jsfiddle、それはボックスをクリックし、

• 再起動スクリプトを主に灰色になり、彼の勾配は正しいようです
• 再起動し、ボックスを までドラッグすると、r ed

これはどのように動作するのでしょうか（おそらくグラデーションは広い領域に適用されていますか）？もしそうなら、要素をドラッグするときにどのようにグラデーションを表示させることができますか？

Answer 1

私はいくつかのより多くのそれを絞り込む：あなたはtranslateattrを呼び出すときhttp://jsfiddle.net/Lr5fz/16/

問題が発生します。なんらかの理由により、逆翻訳はlineargradient要素のgradientTransformに適用されます。ソースライン722から839でさらにbugtracing開始のために

：https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js