悬停时动画SVG

问题描述

我试图在悬停时为SVG文件制作动画。默认情况下，它使用svg函数进行动画处理，例如：

I'm trying to animate an SVG file on hover. by default it animates great with svg functions like:

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

但现在我只想在悬停时转换它。

but now i want to transform it only on hover.

这是笔：

推荐答案

这也可以用CSS来完成。使用将会更具前瞻性。

This can also be accomplished with CSS. With the impending deprecation of SMIL animations, using CSS will be more future-proof.

1. 为小型和大型cog提供自己ID的路径。
应用CSS动画到齿轮，初始动画播放状态 已暂停。

2. 在 svg 元素的：hover 上，更改 animation-play-state 到运行。

1. Give the paths for the small and large cog their own IDs.
2. Apply a CSS animation to the cogs, with an initial animation-play-state of paused.
3. On :hover of the svg element, change the animation-play-state to running.

以下演示仅使用非前缀动画属性。为了使其一致地跨浏览器，应该添加浏览器前缀。

The demo below uses only the non-prefixed animation properties. To make it work consistently cross-browser the browser prefixes should be added.

#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>

这篇关于悬停时动画SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！