SVG 悬停时旋转图像填充

Question

我有一个 svg 遮罩，它在悬停时顺时针旋转，里面填充了图片。我希望图片逆时针旋转以补偿悬停时形状的旋转。

我的问题是悬停时图片变形了。我试过 overflow:hidden 但没用。

这是我的 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 然后尝试对图像进行反向旋转，不如旋转六边形。多边形（以及裁剪路径）将旋转，但图像不受影响。

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

SVG 悬停时旋转图像填充

SVG rotate image fill on hover

css

svg

hover

svg-animate