1

I get strange behavior when I translate a raphael element and change the fill gradient at the end of the translation (like might be done to show the object is selected). If the object is just "clicked" (no translate or drag) the gradient change works fine. When the object is translated the gradient does not look right.

The issue can be seen in this code:

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 http://jsfiddle.net/gnarlybear/Lr5fz/

  • Drag the box down and it turns mostly grey
  • Restart the script,click the box and he gradient seems correct
  • Restart, drag the box up and it turns red

Is this how it should work (perhaps the gradient is being applied to a broader area)? If so how can I get the gradient to display when dragging an element?

0

1 Answer 1

0

I narrowed it down some more: http://jsfiddle.net/Lr5fz/16/

Problem occurs when you invoke translate then attr. For some reason the inverted translation is applied to the gradientTransform on the lineargradient element.

For further bugtracing start at source lines 722-839: https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js

1
  • Thank you, I'm relatively new to js so sometimes its a big help just to know the problem is real. I'll have to dive deeper but probably won't be quick.
    – Jeff
    Jan 12, 2012 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.