css - content - SVG gira el relleno de imagen en el vuelo estacionario

css content svg color

Question

Tengo una máscara svg que gira en el sentido de las agujas del reloj al pasar el cursor sobre mi cabeza con un relleno de imagen dentro. Me gustaría que la imagen gire en sentido antihorario para compensar la rotación de la forma en vuelo estacionario.

Mi problema es que la imagen sale de la forma cuando se desplaza. Intenté tener un desbordamiento: oculto pero no funciona.

Aquí está mi 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

En lugar de rotar todo el SVG y luego intentar hacer la rotación inversa en la imagen, simplemente rote el hexágono. El polígono (y por lo tanto el clipPath) se rotará, pero la imagen no se verá afectada.

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 violín aquí