程序员经验分享-hwhale

如何将动画渐变添加到 svg 路径？

2024-01-09

我有一个像这样的 heart svg 路径：

<svg viewBox="0 0 100 100">
<path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

我想在它上面添加一个渐变效果，并将渐变从左向右移动，就好像心在闪闪发光。

然而，path不接受background财产，如果我使用fill，它不接受梯度作为值。它也没有一个background-position财产（这样我就可以移动background-position从左到右使用@keyframes).

有办法实现这一点吗？


您可以使用SVG 的 SMIL 动画 https://css-tricks.com/guide-svg-animations-smil/。这个想法是对颜色停止或渐变的偏移进行动画处理以创建所需的效果：

svg {
 border:1px solid;
 width:200px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.5" stop-color="yellow">
                <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

动画颜色：

svg {
 border:1px solid;
 width:200px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="1" stop-color="yellow">
                <animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

另一个想法是考虑蒙版内的路径，然后运行 ​​CSS 动画以轻松设置背景属性的动画：

svg {
  border: 1px solid;
  width: 200px;
}

.box {
  width:200px;
  height:200px;
  background:linear-gradient(to right,red,green,blue) left/200% 100%;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="10 10 24 24"><path  d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /></svg>') center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="10 10 24 24"><path  d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /></svg>') center/contain;
          
   animation:change 2s infinite linear alternate;
}
@keyframes change {
  to {
    background-position:right;
  }
}
<div class="box">
</div>

有关背景计算的更多详细信息的相关问题：在线性渐变上使用带有背景位置的百分比值 https://stackoverflow.com/q/51731106/8620333

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

cssanimations

lineargradients

如何将动画渐变添加到 svg 路径？ 的相关文章

  • 如何更改 .NET MAUI Blazor 项目中的默认字体？

    我有一个用于 NET MAUI Blazor 应用程序的默认 Visual Studio 项目 针对 Windows x64 构建 我尝试了两种不同的更改字体的方法 在MauiProgram cs中有一个字体的配置ConfigureFont

  • IE jquery click 仅适用于 li 中的文本，不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style

  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled

  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任

  • 滚动时静态标题

    我编写了一个主页 现在我正在尝试构建一个标题 该标题是静态的 就像在滚动内容时不滚动一样 当内容位于其下方时 它应该保持在顶部 我找到了这个解决方案here https stackoverflow com questions 9677894

  • 如何使用 CSS 将 div 置于表格中心？

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM

  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil

  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影

  • 如何排除CSS伪类选择器中的最后一个子元素

    我想为从 4 到 n 1 的子 div 应用特定样式 我能够从 4 到 n 执行此操作 但无法排除最后一个 div 这是 jsfiddlehttp jsfiddle net 8WLXX http jsfiddle net 8WLXX con

  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下

  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”？

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标

  • 按钮轮廓大于按钮尺寸

    我试图制作一个带有 3 个点的按钮 虽然它带来了奇怪的问题 当你点击它时 你会注意到在焦点模式下有一座奇怪的 山 button letter spacing 2px padding top 4em padding bottom 8em li

  • 使用百分比 (%) 时如何计算填充？

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA

  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口

  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码

  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571

  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s

  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta

  • .net dropdownlist对齐文本

    我正在尝试将 net 下拉列表中的文本向右对齐 使用 CssClass 我可以在 Firefox 中将文本向右对齐 IE 不会将文本右对齐 而是左对齐 我读到 IE 6 不支持这个 这是真的 我使用的是 IE7 但我的大多数用户将使用 IE

  • 如何更改 div 悬停时的跨度颜色

    我正在尝试更改 div 悬停时跨度的颜色 如何使红色汉堡按钮 即跨度 在 div 悬停时将颜色更改为黑色 PS 现在它在跨度的悬停上执行此操作 JSFiddle https jsfiddle net bjjbqct8 https jsfid

随机推荐

  • 根据 pom 中的活动配置文件更改包装

    我有一个用 Maven 编译的项目 我在 pom xml 中声明了不同的配置文件 对于其中一些配置文件 我更喜欢构建战争 而对于其他配置文件 我更喜欢罐子 我用来手动编辑 pom xml 文件并将打包变量更改为

  • iOS：Testflight 没有可供外部测试人员使用的版本

    我正在使用 testflight 作为我的应用程序的 Beta 测试工具 我已上传构建 但邀请已成功发送给内部测试人员 但没有邀请发送给外部测试人员 Below image shows both the groups has been in

  • 未捕获的引用错误：__importDefault 未定义

    我是角度新手 我在我的中遇到这个错误index component ts file 未捕获的引用错误 importDefault 未定义 附上错误截图 https i stack imgur com xUKWA png 我从 8 升级到 9

  • React Native - 具有动态高度子项的 FlatList

    我一直在努力将类似砖石的风格融入我的应用程序中 我尝试应用react native masonry包裹 但是您必须传递图像网址 我正在尝试实现相同的样式 但渲染文本而不一定渲染图像 到目前为止 我已经解决了FlatList 但这是我所能得到

  • 在 D3 强制布局节点标签中插入换行符

    因此 我正在使用力定向图 并且我已将鼠标悬停在节点上的 text 更改为数据中的另一个文本 我的代码如下所示 script var data nodes name YHO full name Yahoo type 1 slug www ya

  • Silverstripe 条件验证

    我有一个包含多个操作的表单 例如创建订单并创建报价 根据单击的操作 我需要应用不同的验证 例如报价不需要订单参考号 这在 Silverstripe 中可能吗 如果不是的话我该怎么办呢 public function Order reques

  • C# 模拟单元测试 GraphServiceClient

    我在使用 Moq 和 xUnit 在 C 中编写单元测试时遇到问题 在我的服务中 我有以下代码 var options new TokenCredentialOptions AuthorityHost AzureAuthorityHosts

  • 获取页面上的当前类别名称，该页面按类别和自定义元键过滤帖子

    我成功地使用自定义插件 和meta key 按喜欢 计数 过滤了我的所有WordPress帖子 在自定义页面模板中 这也让我可以使用以下内容过滤特定类别中最喜欢的帖子 if isset GET category args array met

  • 如何终止由 Ant 启动的失控 Java 进程？

    如果我从 ant 脚本启动一个分叉的 java 进程并终止该 ant 进程 它不会终止该 java 进程 无论是从 IDE 还是从命令行运行都是如此

  • 如何在 ms access vba 中运行追加查询作为事务的一部分

    我对编程非常陌生 一直在 MS Access 2016 上构建我公司的库存数据库 到目前为止 我已经能够很好地使用宏 但我正在尝试运行由追加和删除查询组成的事务我正在努力处理 vba 代码 我想出了如何在查询因错误而失败的情况下运行事务 但

  • html5和xamarin有什么区别？

    我是一名 C NET 开发人员 我想开发可以在 iPhone Android 和 Windows Phone 上运行的移动应用程序 到目前为止 我发现www xamarin com提供了一个可以使用C 开发iphone和android的解决

  • 如何禁用复选框抖动

    我在 ListTile 中使用 Checkbox 如下所示 ListTile leading Checkbox value isChecked onChanged v setState isChecked isChecked title T

  • 正则表达式查找代码中的空注释

    我正在寻找一个正则表达式 它只能找到空的java注释 如下所示 Eclipse 创建这些时 例如生成序列版本 ID 还有另一个thread https stackoverflow com questions 1657066 java reg

  • angularjs 过滤器不适用于 $http

    我是 angular js 的新手 但我不知道如何制作 filter xxx 处理通过 http 服务生成的数据 在下面的代码中 我根本无法让过滤器处理 http 生成的数据 当我在输入框中键入内容时 它根本不执行任何操作 但是 如果我在

  • 如何在 PHP 中按日期对文件进行排序

    我目前有一个脚本 它允许我输出同一目录中的文件列表 输出显示名称 然后我使用filemtime 函数显示文件修改日期 如何对输出进行排序以显示最新修改的文 件 这就是我现在所拥有的 if handle opendir while false

  • 使用 NextJS 动态添加变量到外部 js 脚本

    我里面有这个外部 hotjar 脚本 static js of my nextjs应用 function h o t j a r h hj h hj function h hj q h hj q push arguments h hjSet

  • 端口 443 上出现 SSL 错误，页面未显示并导致错误 404

    我最近必须找到一种方法来为我的域名获取 SSL 证书 正如您可能知道的那样 Facebook 要求在 10 月 1 日之前提供此证书 因此 我在我的服务器上签署并安装了startssl 证书 现在我的问题是 当我尝试访问我的 https 站

  • 将 XML 发送到 Android 中的 Web 服务

    我想将其作为 XML 发送到我的 Web 服务 我该怎么做呢

  • 动画滚动顶部在 Firefox 中不起作用

    这个功能运行良好 它将主体滚动到所需容器的偏移量 function scrolear destino var stop destino offset top var delay 1000 body animate scrollTop sto

  • 如何将动画渐变添加到 svg 路径？

    我有一个像这样的 heart svg 路径

热门标签