SVG rotate image fill on hover

Question

У меня есть svg-маска, которая вращается по часовой стрелке при наведении с заполнением изображения внутри. Я хотел бы, чтобы изображение вращалось против часовой стрелки, чтобы компенсировать поворот фигуры при наведении.

Моя проблема заключается в том, что при наведении изображения изображение выходит из формы. Я попытался переполнить: скрытый, но он не работает.

Вот мой jsfiddle: http://jsfiddle.net/nyb5wffv/1/

#hex { 
overflow:hidden; 
} 

svg { 
padding: 50px; 
width: 200px; 
height: 200px; 
transition: all 0.25s; 
} 

svg a { 
-ms-transform: rotate(0deg); /* IE 9 */ 
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ 
transform: rotate(0deg); 
} 

svg:hover{ 
-ms-transform: rotate(7deg); /* IE 9 */ 
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 
transform: rotate(7deg); 
} 

svg:hover a { 
-ms-transform: rotate(-7deg); /* IE 9 */ 
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */ 
transform: rotate(-7deg); 
} 

Answer 1

Вместо вращая весь SVG, а затем пытается сделать обратное вращение на изображение, просто поверните шестигранник. Полигон (и, следовательно, clipPath) будет повернут, но изображение не будет затронуто.

svg #hex { 
    -ms-transform: rotate(0deg); /* IE 9 */ 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ 
    transform: rotate(0deg); 

    -ms-transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    transform: 50% 50%; 
} 

svg:hover #hex { 
    -ms-transform: rotate(7deg); /* IE 9 */ 
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 
    transform: rotate(7deg); 
} 

Demo fiddle here