仅使用CSS悬停即可沿不同方向旋转多个SVG层

Question

当用户将鼠标悬停在图像上方时，我试图朝不同的方向旋转SVG图层。 我可以轻松旋转div容器，但是当然可以旋转整个图像。 我已经开始编写代码了，希望你们中的一个熟悉SVG动画的明亮火花可以帮助我朝正确的方向发展。 如果可能的话，我想避免使用SVG SMIL或JavaScript解决方案。

这是我的HTML代码 ：

<div class="services-one">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
        <g id="sm_ring">
            <path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z"/>
            <path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z"/>
            <path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z"/>
        </g>
        <g id="md_ring">
            <path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z"/>
            <path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z"/>
            <path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z"/>
        </g>
        <g id="lg_ring">
            <path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z"/>
            <path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z"/>
            <path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z"/>
        </g>
    </svg>
</div>

这是我的CSS代码：

.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring
{
    -webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;
    -webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;
    overflow:hidden;
}

.services-one:hover #lg_ring, .services-one:hover #sm_ring
{
    -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);
}

.services-one:hover #md_ring
{
    -webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg);
}

这是我的JSFiddle ： http : //jsfiddle.net/bcdxmpyc/

最上面的例子是我尝试旋转的SVG，我希望它也像下面的例子一样旋转，但显然环向不同的方向！ 我究竟做错了什么？

Answer 1

您需要指定transform-origin

 .services-one { width: 100px; height: 100px; } .services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring { -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; -o-transition-duration:0.8s; transition-duration:0.8s; -webkit-transition-property:-webkit-transform; -moz-transition-property:-moz-transform; -o-transition-property:-o-transform; transition-property:transform; overflow:hidden; transform-origin:center center; /* here */ } .services-one:hover #lg_ring, .services-one:hover #sm_ring { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } .services-one:hover #md_ring { -webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); transform:rotate(-360deg); } 

 <div class="services-one"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve"> <g id="sm_ring"> <path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z" /> <path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z" /> <path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z" /> </g> <g id="md_ring"> <path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z" /> <path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z" /> <path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z" /> </g> <g id="lg_ring"> <path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z" /> <path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z" /> <path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z" /> </g> </svg> </div> 

转换源在Firefox中不能很好地工作，而在Internet Explorer中则没有任何作用。 但是，您可以使用JavaScript库svgjs或gsap来解决此问题。