CSS-свойства SVG-изображения

.gear { 
  transition: all 1s; 
  transform-origin: 50% 50%; 
} 
 
svg:hover .gear { 
  -webkit-transform: rotate(1turn); 
  transform: rotate(1turn); 
}

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="130px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
viewBox="0 0 1300000 1300000" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
        <style type="text/css"> 
            <![CDATA[ 
            .fil0 {fill: #AA377C} 
            .fil2 {fill: white} 
            .fil1 {fill: url(#id0)} 
            .gear {fill: white} 
            ]]> 
        </style> 
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1.00142e+06" y1="485829" x2="1.31052e+06" y2="831415"> 
            <stop offset="0" style="stop-opacity:1; stop-color:#9C1D69"/> 
            <stop offset="1" style="stop-opacity:1; stop-color:#AA377C"/> 
        </linearGradient> 
    </defs> 
    <g id="Layer_x0020_1"> 
        <metadata id="CorelCorpID_0Corel-Layer"/> 
        <circle class="fil0" cx="650000" cy="650000" r="649994"/> 
        <path class="fil1" d="M480762 377157l97794 97747 30130 -52204c2220,-3721 6696,-5209 10677,-3721l43192 17350c8929,-6803 18732,-12649 29397,-17102l6425 -46050c650,-4087 4229,-7311 8610,-7311l69448 0c2327,0 4418,921 5977,2385l130 119 130 141 130 130 129 142 59067 59054 22051 -8858c3661,-1382 7724,-224 10110,2858l47 -47 402208 402208c-52547,189565 -188833,344311 -366539,421920l-437038 -437038c-3047,-3024 -6047,-6094 -9024,-9201 -99554,-103640 -160769,-244438 -160769,-399550 0,-18827 15271,-33933 33932,-33933l118759 0c9944,0 18838,4217 25027,10961z"/> 
        <path class="fil2" d="M877737 790361c-41314,-60 -76723,-2091 -114069,-14433 -11716,-3721 -25122,-1016 -34452,8314l-59988 59114c-5610,5539 -13937,6709 -20870,2976 -86692,-46913 -167986,-128171 -215159,-214662 -3814,-6957 -2633,-15331 2989,-20988l59597 -59882c9343,-9330 12059,-22724 8315,-34440 -12555,-37996 -14433,-73972 -14433,-116231 0,-18827 -15106,-33933 -33932,-33933l-118759 0c-18661,0 -33932,15106 -33932,33933 0,318634 258221,576855 576843,576855 18838,0 33933,-15094 33933,-33932l0 -118759c0,-18649 -14799,-33661 -33378,-33944 -898,0 -1795,12 -2705,12z"/> 
        <path class="gear" d="M818737 436896l44814 -18016c4012,-1553 8757,-24 10922,3914l36008 62329c2238,3816 1198,8708 -2202,11509l-38099 29746c1590,11644 1651,23361 98,35274l37952 29623c3425,2568 4440,7449 2190,11350l-35947 62292c-2263,3926 -7008,5480 -11008,3939l-44643 -18078c-9344,7241 -19655,12990 -30577,17503l-6788 47725c-697,4354 -4379,7583 -8855,7644l-71955 0c-4489,98 -8207,-3265 -8892,-7485l-6666 -47799c-11374,-4647 -20792,-10078 -30491,-17600l-44753 18114c-4000,1517 -8733,-12 -10922,-3963l-35984 -62304c-2177,-3926 -1198,-8708 2202,-11509l37916 -29746c-1468,-11534 -1639,-23349 -110,-35225l-37965 -29599c-3351,-2715 -4367,-7595 -2104,-11509l35959 -62292c2250,-3902 6996,-5455 11008,-3890l44630 18041c9382,-7228 19656,-12965 30566,-17515l6788 -47700c709,-4354 4366,-7571 8867,-7669l71955 12c4513,-85 8207,3254 8879,7510l6825 47835c11619,4758 20426,9895 30382,17539zm-144668 70793c-19960,34577 -8145,78767 26431,98740 34602,19973 78780,8109 98741,-26455 19973,-34589 8121,-78743 -26468,-98716 -34589,-19973 -78743,-8146 -98704,26431z"/> 
    </g> 
</svg>

svg { 
  transition: all 1s; 
  transform-origin: 50% 50%; 
} 
svg:hover { 
  fill: url(#bgh); 
  transform: rotate(1turn); 
} 
 
circle:hover { 
  fill: url(#bgh); 
}

<svg height="204" width="204"> 
  <defs> 
    <pattern id="bg" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32"> 
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/9bd620150717350f66401d7f9590a8b2?s=32&d=identicon&r=PG"></image> 
    </pattern> 
    <pattern id="bgh" x="0" y="0" patternUnits="userSpaceOnUse" height="32" width="32"> 
      <image x="0" y="0" width="32" height="32" xlink:href="https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG"></image> 
    </pattern> 
  </defs> 
  <circle cx="102" cy="102" r="100" stroke="black" stroke-width="3" fill="url(#bg)" /> 
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="130px" version="1.1"  
viewBox="0 0 1300000 1300000" 
xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <defs> 
        <style type="text/css"> 
             
            .fil0 {fill: #AA377C} 
            .fil2 {fill: white} 
            .fil1 {fill: url(#id0)} 
            .gear {fill: white} 
			 .gear:hover{ 
   -webkit-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   	transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   -o-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px) ;  
   -moz-transform:  scale(1.5,1.5)  translateX(-200000px) translateY(-220000px);  
   -ms-transform: scale(1.5,1.5)  translateX(-200000px) translateY(-220000px);  
    cursor:move; 
  	 fill:gold; 
	 } 
            
        </style> 
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1.00142e+06" y1="485829" x2="1.31052e+06" y2="831415"> 
            <stop offset="0" style="stop-opacity:1; stop-color:#9C1D69"/> 
            <stop offset="1" style="stop-opacity:1; stop-color:#AA377C"/> 
        </linearGradient> 
    </defs> 
    <g id="Layer_x0020_1"> 
        <metadata id="CorelCorpID_0Corel-Layer"/> 
        <circle class="fil0" cx="650000" cy="650000" r="649994"/> 
        <path class="fil1" d="M480762 377157l97794 97747 30130 -52204c2220,-3721 6696,-5209 10677,-3721l43192 17350c8929,-6803 18732,-12649 29397,-17102l6425 -46050c650,-4087 4229,-7311 8610,-7311l69448 0c2327,0 4418,921 5977,2385l130 119 130 141 130 130 129 142 59067 59054 22051 -8858c3661,-1382 7724,-224 10110,2858l47 -47 402208 402208c-52547,189565 -188833,344311 -366539,421920l-437038 -437038c-3047,-3024 -6047,-6094 -9024,-9201 -99554,-103640 -160769,-244438 -160769,-399550 0,-18827 15271,-33933 33932,-33933l118759 0c9944,0 18838,4217 25027,10961z"/> 
        <path class="fil2" d="M877737 790361c-41314,-60 -76723,-2091 -114069,-14433 -11716,-3721 -25122,-1016 -34452,8314l-59988 59114c-5610,5539 -13937,6709 -20870,2976 -86692,-46913 -167986,-128171 -215159,-214662 -3814,-6957 -2633,-15331 2989,-20988l59597 -59882c9343,-9330 12059,-22724 8315,-34440 -12555,-37996 -14433,-73972 -14433,-116231 0,-18827 -15106,-33933 -33932,-33933l-118759 0c-18661,0 -33932,15106 -33932,33933 0,318634 258221,576855 576843,576855 18838,0 33933,-15094 33933,-33932l0 -118759c0,-18649 -14799,-33661 -33378,-33944 -898,0 -1795,12 -2705,12z"/> 
        <path class="gear" d="M818737 436896l44814 -18016c4012,-1553 8757,-24 10922,3914l36008 62329c2238,3816 1198,8708 -2202,11509l-38099 29746c1590,11644 1651,23361 98,35274l37952 29623c3425,2568 4440,7449 2190,11350l-35947 62292c-2263,3926 -7008,5480 -11008,3939l-44643 -18078c-9344,7241 -19655,12990 -30577,17503l-6788 47725c-697,4354 -4379,7583 -8855,7644l-71955 0c-4489,98 -8207,-3265 -8892,-7485l-6666 -47799c-11374,-4647 -20792,-10078 -30491,-17600l-44753 18114c-4000,1517 -8733,-12 -10922,-3963l-35984 -62304c-2177,-3926 -1198,-8708 2202,-11509l37916 -29746c-1468,-11534 -1639,-23349 -110,-35225l-37965 -29599c-3351,-2715 -4367,-7595 -2104,-11509l35959 -62292c2250,-3902 6996,-5455 11008,-3890l44630 18041c9382,-7228 19656,-12965 30566,-17515l6788 -47700c709,-4354 4366,-7571 8867,-7669l71955 12c4513,-85 8207,3254 8879,7510l6825 47835c11619,4758 20426,9895 30382,17539zm-144668 70793c-19960,34577 -8145,78767 26431,98740 34602,19973 78780,8109 98741,-26455 19973,-34589 8121,-78743 -26468,-98716 -34589,-19973 -78743,-8146 -98704,26431z"/> 
    </g> 
</svg>