SVG rotate image fill on hover

问题

I have a svg mask that rotate clockwise on hover with a picture fill inside. I would like the picture to rotate counter-clock wise to compensate the rotation of the shape on hover.

My issue is that the picture goes out of the shape instead when hover. I tried to have an overflow:hidden but it doesn't work.

Here is my 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);
}

回答1:

Instead of rotating the whole SVG and then trying to do the reverse rotation on the image, just rotate the hexagon. The polygon (and thus the clipPath) will be rotated, but the image will be unaffected.

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

来源：https://stackoverflow.com/questions/32291913/svg-rotate-image-fill-on-hover

标签

css

svg

hover

svg-animate