悬停时为 SVG 制作动画

2024-05-20

我正在尝试在悬停时为 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/ https://jsfiddle.net/g1todrkg/


这也可以通过 CSS 来完成。随着SMIL 动画即将弃用 https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/,使用 CSS 将更加面向未来。

  1. 为小齿轮和大齿轮提供各自的 ID。
  2. 将 CSS 动画应用到齿轮,并带有初始值animation-play-state of paused.
  3. On :hover of the svg元素,改变animation-play-state to 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

悬停时为 SVG 制作动画 的相关文章

  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 如何将 HTML 转换为 Markdown?

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Bootstrap:如何将按钮组对齐在中心(垂直)

    在下面的代码中
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 如何在Yii框架中向Form添加类?

    我在 Yii 中有一个表单 我想向该表单添加一个类
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 如何从 Laravel 执行存储过程

    我需要在表单提交数据后执行存储过程 我让存储过程按照我想要的方式工作 并且我的表单正常工作 我只是不知道从 laravel 5 执行 sp 的语句 它应该是这样的 执行 my stored procedure 但我似乎在网上找不到类似的东西
  • 使用 PyTorch 分布式 NCCL 连接失败

    我正在尝试使用 torch distributed 将 PyTorch 张量从一台机器发送到另一台机器 dist init process group 函数正常工作 但是 dist broadcast 函数中出现连接失败 这是我在节点 0
  • 扩展(十进制,例如 400.1、401.4 等)HTTP 状态代码从何而来?

    我越来越多地看到十进制样式 HTTP 状态代码的激增 而且我似乎找不到任何 RFC 或其他 IETF 建议 甚至 W3C 草案或除 Microsoft IIS 文档之外的其他内容 请参阅https support microsoft com
  • 生产代码中的 LRU 实现

    我有一些 C 代码 需要使用 LRU 技术实现缓存替换 目前我知道两种实现LRU缓存替换的方法 每次访问缓存数据时使用时间戳 最后比较替换时的时间戳 使用缓存项的堆栈 如果最近访问过它们 则将它们移动到顶部 因此最后底部将包含 LRU 候选
  • 类型“typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")”上不存在属性“auth”。 TS(2339)

    我是 FireBase 的初学者 我正在尝试使用 Angular 通过 FireBase 实现 Google 登录 我在 auth 时收到上述错误 我特此附上login component ts和package json package l
  • 如何在c#中的内部类中访问外部类的变量[重复]

    这个问题在这里已经有答案了 我有两个类 我需要声明两个类共有的变量 如果是嵌套类 我需要访问内部类中的外部类变量 请给我一个更好的方法来在 C 中做到这一点 示例代码 Class A int a Class B Need to access
  • 列出所有 k 元组,其条目总和为 n,忽略旋转

    有没有一种有效的算法来查找所有序列k总和为的非负整数n 同时避免旋转 如果可能的话 完全避免 顺序很重要 但对于我正在解决的问题来说 轮换是多余的 例如 与k 3 和n 3 我想要得到一个如下所示的列表 3 0 0 2 1 0 2 0 1
  • 我实现了检查用户权限的方法,即使我在颤振中收到错误消息“MissingPluginException”?

    我实现了方法检查权限状态即使我收到一条错误消息 未处理的异常 MissingPluginException 在通道 flutter baseflow com permissions methods 上找不到方法 checkPermissio
  • Mac 上用户“postgres”的密码身份验证失败

    我在创建新的 psql 用户时遇到问题 因为我无法以 postgres 身份登录 psql 我已尝试过 1 sudo u postgres psql 2 sudo u postgres createuser img site P s e 他
  • “WHERE”处或附近的语法错误

    创建 postgres 函数时会导致错误 如下所示 错误 WHERE 处或附近的语法错误 第 19 行 其中 s shift id shiftid 错误 错误 WHERE 处或附近的语法错误 SQL状态 42601 人物 108 请帮忙 C
  • 关于“没有绑定的类型签名”的错误

    我在 Haskell 中遇到 ASCII 问题 fromEnum Char gt Int toEnum Int gt Char offset Int offset fromEnum A fromEnum a toUpper Char gt
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 在 powershell 中打开 Excel 时出错

    我需要用以下命令打开 Excel 文件CorruptLoad来自 powershell 脚本的参数 但是当我尝试做到这一点时 出现错误Exception calling Open with 15 argument s open method
  • 为什么我不应该对不是由 malloc() 分配的变量调用 free() ?

    我在某处读到 使用它是灾难性的free删除不是通过调用创建的对象malloc 这是真的 为什么 这是未定义的行为 永远不要尝试它 让我们看看当您尝试时会发生什么free 自动变量 堆管理器必须推断出如何获取内存块的所有权 为此 它要么必须使
  • 挂钩 Eclipse 构建过程吗?

    我希望在 Eclipse 中按下构建按钮时能够运行一个简单的 Java 程序 目前 当我单击 构建 时 它会运行一些 JRebel 日志记录代码 我有一个程序可以解析 JRebel 日志文件并将统计信息存储在数据库中 是否可以编写一个插件或
  • 哪个集合更适合存储多维数组中的数据?

    我有一个multi dimensional array of string 我愿意将其转换为某种集合类型 以便我可以根据自己的意愿添加 删除和插入元素 在数组中 我无法删除特定位置的元素 我需要这样的集合 我可以在其中删除特定位置的数据 也
  • 反向引用在 PHP 中不起作用

    最近我一直在研究 更多的是在实践中说实话 正则表达式 我注意到他的力量 我提出的这个要求 link https stackoverflow com questions 30380397 take the text up to a speci
  • Rails 6:每个用户只能创建一个配置文件

    我目前正在开发 Rails 6 应用程序 我有以下关联 用户有一个配置文件 并且配置文件属于用户 当编辑用户的配置文件时 我最终为该用户提供了两个配置文件 我希望每个用户只有一份个人资料 编辑表单 profile edit html erb
  • JSON 到 hashmap (杰克逊)

    我想将 JSON 转换为 HashMapJackson http jackson codehaus org 这是我的 JSON String json Opleidingen name Bijz trajecten zorg en welz
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如