Svg 翻转形状，使用RaphaelJS附加图像

我设法用Raphel创建了一个六边形，给它一个笔划和填充图像，然后（在StackOverFlow的帮助下）设法在六边形上创建了一个翻转动画

但我面临一个问题。六边形翻转时，背景图像不会随之翻转。如何使六边形形状翻转，但当它翻转时，也显示背景图像翻转

我想说的是：

函数多边形（x、y、大小、边、旋转）{
var self=这个；
self.centrePoint=[x，y]；
自我尺寸=尺寸；
self.sides=边；
自旋转=旋转；
self.sizeMultiplier=50；
self.points=[]；
对于（i=0；i

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