悬停时为 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 制作动画 的相关文章

  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • 渲染时 Flutter SVG 延迟

    我在行中显示 SVG 文件形式的图像和文本 由于某些原因 svg 图像的渲染速度比屏幕的其余部分慢 从而导致延迟 这不利于用户体验 这种延迟正常吗 我该怎么做才能使整个屏幕同时渲染 Row mainAxisAlignment MainAxi
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的

随机推荐

  • 如何从 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 函数实现出色的动画效果 例如