svg - RaphaelJS を使用して画像が添付された形状を反転

Question

Rachel でなんとか六角形を作成し、それにストロークと塗りつぶしイメージを与え、(StackOverFlow の助けを借りて) 六角形に反転アニメーションを作成することができました。

しかし、私は問題に直面しています。六角形が反転しても、背景画像は反転しません。六角形を反転させる方法はありますが、反転しているため、背景画像も反転しています。

ここに私が現在持っているものがあります:

function polygon(x, y, size, sides, rotate) {
    var self = this;

    self.centrePoint = [x,y];
    self.size = size;
    self.sides = sides;
    self.rotated = rotate;
    self.sizeMultiplier = 50;

    self.points = [];

    for (i = 0; i < sides; i++) {
        self.points.push([(x + (self.size * self.sizeMultiplier) * (rotate ? Math.sin(2 * 3.14159265 * i / sides) : Math.cos(2 * 3.14159265 * i / sides))), (y + (self.size * self.sizeMultiplier) * (rotate ? Math.cos(2 * 3.14159265 * i / sides) : Math.sin(2 * 3.14159265 * i / sides)))]);
    }

    self.svgString = 'M' + self.points.join(' ') + ' L Z';
}

$(document).ready(function() {
    var paper = Raphael(0, 0, 450, 450);

    var path1 = new polygon(100, 100, 2, 6, false);

    var hex1 = paper.path(path1.svgString);

    hex1.node.id = "hex1";
    hex1.attr("fill", "url('http://i49.tinypic.com/23ma7pt.jpg')");
    hex1.attr("stroke", "#aceace");

    /* flip animation */
    hex1.click(function() {
            hex1.animate({transform: "S0,1"},500,'easeIn', function()
            {    
                hex1.attr("fill","url('http://i49.tinypic.com/23ma7pt.jpg')");
                hex1.animate({transform: "S-1,1"},500,'easeOut');
            });
    });
});