SVG旋转图像填充悬停 [英] SVG rotate image fill on hover

问题描述

我有一个svg掩模，在悬停的图片上顺时针旋转，里面有图片填充。
我希望图片能够逆时针方向旋转，以补偿悬停时形状的旋转。

我的问题是，图片不符合形状，而不是悬停时。
我尝试了一个溢出：隐藏但它不起作用。

这是我的jsfiddle：
http://jsfiddle.net/nyb5wffv/1/

  #hex {
 overflow：hidden; 
} 
 
 svg {
 padding：50px; 
 width：200px; 
 height：200px; 
转换：全部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）; 
} 
  

解决方案

然后尝试在图像上进行反转，旋转六角形。多边形（因此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％; 
变换：50％50％; 
} 
 
 svg：hover #hex {
 -ms-transform：rotate（7deg）; / * IE 9 * / 
 -webkit-transform：rotate（7deg）; / * Chrome，Safari，Opera * / 
 transform：rotate（7deg）; 
} 
  

演示小提琴

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

解决方案

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

这篇关于SVG旋转图像填充悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！