我试图在悬停时设置SVG文件的动画。默认情况下，它使用svg函数激活，如：
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 16 30"
to="360 16 30"
dur="3s"
repeatCount="indefinite"/>
但现在我只想在悬停时进行转换。
这是笔：https://jsfiddle.net/g1todrkg/答案 0 :(得分：9)
这也可以通过CSS实现。使用impending deprecation of SMIL animations，使用CSS将更加面向未来。
animation-play-state为paused。 :hover元素的svg上，将animation-play-state更改为running。 下面的演示仅使用非前缀animation属性。为了使其一致地跨浏览器工作，应添加浏览器前缀。
#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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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>
答案 1 :(得分：5)
<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"/>
在开始时使用mouseover并在结束时使用mouseout
答案 2 :(得分：0)
<animateTransform attributeName="transform"
additive="replace"
type="translate"
dur="0.24s"
keyTimes="0;.167;.333;.5;.667;.833;1"
values="12,22.05;12.084,22.104;12.088,22.078;12.128,22.07;12.068,22.071;12.05,22.05;12.05,22.05"
keySplines=".25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;.25 .5 .5 1;0 0 1 1"
calcMode="spline"
begin="mouseover"
fill="freeze"/>
对我来说足够了：
begin =“ mouseover”
（没有“团队”。）
答案 3 :(得分：0)
根据@AlexEfremo的answer，如果您还使用keyTimes，则如果您对此设置不正确，Firefox会有点宽容，而Chrome和Edge却没有。
确保您的keyTimes末尾不包含分号，例如：
<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"
keyTimes="0; 0.5; 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"
keyTimes="0; 0.5; 1;" /> <!-- note the ; at the end -->
答案 4 :(得分：0)
复制@keyframes 动画{} 并给它一个不同的名称@keyframes animation-hover {} 以用于悬停状态。