Animacja SVG na hover

Question

Próbuję animować plik SVG po najechaniu myszą. domyślnie animuje się świetnie z funkcjami svg, takimi jak:

<animateTransform attributeType="xml" 
       attributeName="transform" 
       type="rotate" 
       from="0 16 30" 
       to="360 16 30" 
       dur="3s" 
       repeatCount="indefinite"/> 

, ale teraz chcę go przekształcić tylko na zawisie.

oto pióro: https://jsfiddle.net/g1todrkg/

Answer 1

 <animateTransform attributeType="xml" 
       attributeName="transform" 
       type="rotate" 
       from="360 24.69 35.778" 
       to="0 24.69 35.778" 
       dur="2s" 
       begin="team.mouseover" 
       end="team.mouseout" 
       repeatCount="indefinite"/> 

wykorzystanie mouseover na początek i na koniec mouseOut

Answer 2

ten może być również wykonana z CSS. Dzięki impending deprecation of SMIL animations używanie CSS będzie bardziej przyszłościowe.

1. Podaj ścieżkom dla małych i dużych trybów własnych własne identyfikatory.
2. Zastosuj animację CSS do trybów, z początkowym animation-play-state z paused.
3. Na :hover elementu svg zmień animation-play-state na running.

Poniższe demo używa tylko nieprzedstawionych właściwości animation. Aby działało zgodnie z różnymi przeglądarkami, należy dodać prefiksy przeglądarki.

#cogSmall, 
 
#cogBig { 
 
    animation-name: spin; 
 
    animation-duration: 4000ms; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    transform-origin:15.887px 29.88px; 
 
    animation-play-state: paused; 
 
} 
 
#cogSmall { 
 
    animation-duration: 3000ms; 
 
    transform-origin: 24.691px 35.778px; 
 
    animation-direction: reverse; 
 
} 
 

 
svg:hover #cogBig, 
 
svg:hover #cogSmall { 
 
    animation-play-state: running; 
 
} 
 

 
@keyframes spin { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<svg version="1.1" id="team" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
 

 
     <g class="idea" fill="#EFCC03"> 
 
     <path d="M41.775,6.312c-3.415,0-6.181,2.651-6.181,5.921c0,3.885,2.696,4.875,2.696,7.136c0,0.558,0.426,1.078,1.067,1.461 
 
\t \t c-0.134,0.11-0.209,0.233-0.209,0.361c0,0.172,0.137,0.334,0.369,0.474c-0.218,0.135-0.346,0.288-0.346,0.456 
 
\t \t c0,0.167,0.13,0.326,0.353,0.462c-0.227,0.136-0.359,0.295-0.359,0.465c0,0.208,0.194,0.399,0.521,0.553 
 
\t \t c-0.125,0.115-0.198,0.242-0.198,0.376c0,0.394,0.615,0.73,1.482,0.866c0.151,0.281,0.463,0.478,0.822,0.478 
 
\t \t c0.36,0,0.669-0.196,0.821-0.476c0.873-0.133,1.497-0.472,1.497-0.868c0-0.131-0.07-0.259-0.193-0.372 
 
\t \t c0.335-0.157,0.532-0.348,0.532-0.555c0-0.171-0.128-0.327-0.352-0.462c0.227-0.139,0.359-0.297,0.359-0.468 
 
\t \t c0-0.172-0.136-0.332-0.368-0.469c0.22-0.136,0.345-0.292,0.345-0.458c0-0.133-0.081-0.261-0.224-0.372 
 
\t \t c0.631-0.382,1.052-0.896,1.052-1.452c0-2.262,2.693-3.251,2.693-7.133C47.957,8.963,45.189,6.312,41.775,6.312L41.775,6.312z 
 
\t \t M45.003,15.898c-0.616,0.907-1.313,1.927-1.355,3.334c-0.212,0.235-0.966,0.618-1.869,0.618c-0.906,0-1.66-0.383-1.871-0.621 
 
\t \t c-0.044-1.404-0.741-2.428-1.359-3.332c-0.688-1.007-1.338-1.96-1.338-3.666c0-2.372,2.05-4.305,4.565-4.305 
 
\t \t c2.517,0,4.563,1.933,4.563,4.305C46.339,13.938,45.688,14.891,45.003,15.898L45.003,15.898z M45.003,15.898" /> 
 
     <path d="M41.775,4.234c0.445,0,0.811-0.48,0.811-1.067V1.262c0-0.591-0.365-1.071-0.811-1.071c-0.446,0-0.809,0.48-0.809,1.071 
 
\t \t v1.905C40.967,3.754,41.329,4.234,41.775,4.234L41.775,4.234z M41.775,4.234" /> 
 
     <path d="M37.63,5.347c0.388-0.224,0.46-0.822,0.164-1.332l-0.949-1.649c-0.296-0.509-0.852-0.744-1.237-0.522 
 
\t \t c-0.384,0.222-0.461,0.822-0.164,1.332l0.952,1.65C36.687,5.333,37.244,5.569,37.63,5.347L37.63,5.347z M37.63,5.347" /> 
 
     <path d="M34.075,7.146l-1.651-0.952c-0.509-0.295-1.108-0.22-1.331,0.164c-0.222,0.386,0.014,0.942,0.523,1.235l1.649,0.953 
 
\t \t c0.509,0.294,1.106,0.221,1.328-0.166C34.816,7.994,34.583,7.438,34.075,7.146L34.075,7.146z M34.075,7.146" /> 
 
     <path d="M51.937,17.457l-1.65-0.952c-0.509-0.295-1.108-0.219-1.33,0.166c-0.224,0.384,0.012,0.94,0.521,1.235l1.649,0.953 
 
\t \t c0.51,0.292,1.107,0.219,1.331-0.167C52.681,18.306,52.446,17.753,51.937,17.457L51.937,17.457z M51.937,17.457" /> 
 
     <path d="M33.485,12.525c0-0.445-0.481-0.809-1.067-0.809h-1.906c-0.592,0-1.071,0.363-1.071,0.809s0.479,0.811,1.071,0.811h1.906 
 
\t \t C33.004,13.336,33.485,12.971,33.485,12.525L33.485,12.525z M33.485,12.525" /> 
 
     <path d="M53.041,11.717h-1.905c-0.588,0-1.071,0.363-1.071,0.809s0.483,0.811,1.071,0.811h1.905c0.588,0,1.067-0.365,1.067-0.811 
 
\t \t S53.629,11.717,53.041,11.717L53.041,11.717z M53.041,11.717" /> 
 
     <path d="M33.266,16.505l-1.649,0.952c-0.51,0.296-0.746,0.849-0.523,1.235c0.223,0.386,0.82,0.459,1.331,0.167l1.648-0.953 
 
\t \t c0.511-0.295,0.744-0.851,0.521-1.235C34.372,16.286,33.774,16.21,33.266,16.505L33.266,16.505z M33.266,16.505" /> 
 
     <path d="M50.286,8.546l1.65-0.953c0.51-0.293,0.744-0.849,0.521-1.235c-0.224-0.384-0.821-0.459-1.331-0.164l-1.649,0.952 
 
\t \t c-0.51,0.292-0.745,0.849-0.521,1.235C49.178,8.767,49.777,8.84,50.286,8.546L50.286,8.546z M50.286,8.546" /> 
 
     <path d="M47.942,1.843C47.556,1.622,47,1.856,46.707,2.366l-0.952,1.649c-0.297,0.51-0.22,1.107,0.166,1.33 
 
\t \t c0.384,0.224,0.94-0.011,1.235-0.52l0.953-1.653C48.401,2.663,48.329,2.065,47.942,1.843L47.942,1.843z M47.942,1.843" /> 
 
     </g> 
 
     <path fill="#3B6DEA" d="M6.295,32.49c-1.369,8.458,7.34,17.906,7.34,17.906l-0.497,9.823h14.173l1.087-4.518c0,0,0.616,1.035,4.279,1.343 
 
\t c3.663,0.313,3.215-4.16,3.215-4.16s2.439-1.074,2.439-1.881c0-0.81-1.444-1.849-1.444-1.849s1.555,0.277,2.113-0.375 
 
\t c0.56-0.649-0.683-3.015-0.683-3.015s1.911-0.049,3.038-1.286c1.127-1.242-3.549-4.909-3.549-7.27 
 
\t c2.646-12.962-7.885-18.894-19.571-17.031C6.546,22.046,6.983,29.113,6.295,32.49L6.295,32.49z" /> 
 
     <path id="cogBig" fill="#FFFFFF" d="M21.789,29.281v1.195c0,0.323-0.261,0.569-0.584,0.569h-0.658c0,0,0,0.006,0,0.011 
 
\t c-0.114,0.452-0.297,0.892-0.531,1.286l0.46,0.457c0.227,0.227,0.224,0.599,0,0.827l-0.844,0.842 
 
\t c-0.111,0.109-0.26,0.172-0.413,0.172c-0.156,0-0.305-0.063-0.416-0.172l-0.458-0.461c-0.39,0.235-0.818,0.418-1.269,0.532 
 
\t c-0.003,0-0.003,0.334-0.006,0.658c-0.004,0.323-0.264,0.58-0.588,0.58h-1.187c-0.16,0-0.305-0.06-0.416-0.169 
 
\t c-0.111-0.112-0.175-0.263-0.172-0.418l0.008-0.639c-0.468-0.098-0.907-0.299-1.312-0.54l-0.458,0.456 
 
\t c-0.108,0.109-0.256,0.172-0.413,0.172c-0.157,0-0.305-0.063-0.413-0.172l-0.845-0.842c-0.227-0.229-0.227-0.601,0-0.827 
 
\t l0.458-0.461c-0.234-0.391-0.413-0.821-0.528-1.279l0,0h-0.64c-0.319,0-0.58-0.26-0.58-0.583v-1.195 
 
\t c0-0.323,0.257-0.568,0.577-0.568h0.631c0.003-0.005,0.003-0.007,0.003-0.012c0.116-0.464,0.298-0.899,0.536-1.298l-0.458-0.457 
 
\t c-0.111-0.111-0.17-0.257-0.17-0.413s0.059-0.305,0.17-0.412l0.845-0.845c0.107-0.107,0.256-0.171,0.413-0.171 
 
\t c0.156,0,0.305,0.064,0.413,0.171l0.458,0.461c0.405-0.242,0.844-0.424,1.309-0.539l-0.008-0.632c0-0.152,0.06-0.304,0.171-0.413 
 
\t c0.112-0.112,0.261-0.174,0.417-0.174h1.189c0.319,0,0.583,0.255,0.583,0.579c0.004,0.316,0.008,0.651,0.008,0.651 
 
\t c0.454,0.116,0.877,0.293,1.268,0.527l0.458-0.461c0.23-0.226,0.599-0.226,0.829,0l0.84,0.845c0.231,0.226,0.231,0.599,0,0.829 
 
\t l-0.457,0.458c0.238,0.401,0.421,0.839,0.535,1.3c0,0.005,0.004,0.005,0.004,0.008h0.65c0.324,0,0.584,0.242,0.584,0.564H21.789z"> 
 
     2 
 

 
     </path> 
 
     <circle cx="15.887" cy="29.88" r="1.904" fill="#3B6DEA" /> 
 
     <path id="cogSmall" fill="#FFFFFF" d="M28.648,35.378v0.8c0,0.217-0.174,0.382-0.392,0.382h-0.441c0,0,0,0.006,0,0.007 
 
\t c-0.077,0.305-0.198,0.6-0.355,0.863l0.309,0.307c0.152,0.152,0.149,0.402,0,0.554l-0.566,0.566 
 
\t c-0.075,0.072-0.174,0.113-0.276,0.113c-0.104,0-0.205-0.041-0.28-0.113l-0.307-0.31c-0.261,0.158-0.548,0.28-0.85,0.357 
 
\t c-0.002,0-0.002,0.224-0.005,0.44c-0.002,0.218-0.176,0.39-0.394,0.39h-0.795c-0.108,0-0.205-0.04-0.28-0.114 
 
\t c-0.075-0.075-0.118-0.175-0.115-0.279l0.005-0.43c-0.314-0.064-0.607-0.199-0.881-0.36l-0.307,0.306 
 
\t c-0.071,0.072-0.171,0.113-0.275,0.113c-0.105,0-0.205-0.041-0.277-0.113l-0.566-0.566c-0.153-0.151-0.153-0.401,0-0.554l0.306-0.31 
 
\t c-0.156-0.261-0.276-0.55-0.354-0.856l0,0h-0.43c-0.214,0-0.389-0.176-0.389-0.393v-0.8c0-0.218,0.173-0.382,0.387-0.382h0.424 
 
\t c0.002-0.002,0.002-0.003,0.002-0.009c0.077-0.311,0.199-0.603,0.359-0.869l-0.306-0.307c-0.076-0.075-0.116-0.172-0.116-0.277 
 
\t c0-0.104,0.04-0.204,0.116-0.275l0.566-0.566c0.073-0.073,0.172-0.116,0.277-0.116c0.104,0,0.204,0.043,0.275,0.116l0.307,0.309 
 
\t c0.273-0.161,0.567-0.285,0.879-0.362l-0.006-0.424c0-0.101,0.041-0.203,0.116-0.276c0.075-0.074,0.174-0.116,0.278-0.116h0.798 
 
\t c0.214,0,0.392,0.171,0.392,0.389c0.002,0.211,0.005,0.438,0.005,0.438c0.304,0.077,0.588,0.195,0.85,0.353l0.307-0.309 
 
\t c0.154-0.151,0.401-0.151,0.556,0l0.563,0.566c0.154,0.15,0.154,0.4,0,0.556l-0.307,0.306c0.161,0.269,0.282,0.564,0.359,0.874 
 
\t c0,0.002,0.003,0.002,0.003,0.005h0.436c0.218,0,0.392,0.161,0.392,0.379H28.648z"> 
 

 
     </path> 
 
     <circle cx="24.691" cy="35.778" r="1.277" fill="#3B6DEA" /> 
 
    </svg>