css - 如何将动画渐变添加到 svg 路径?
问题描述
我有一个像这样的心脏 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 动画。这个想法是为颜色停止或渐变的偏移设置动画以创建所需的效果:
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>
获取有关背景计算的更多详细信息的相关问题:Using percent values with background-position on a linear-gradient
推荐阅读
- java - 如何使用netbeans在java上验证从jlabel到jtextfield的值
- rest - 没有 GUI 的 REST 服务器
- reactjs - 在 NextJS 中使用 async 和 Cookies.get 的 useEffect
- oracle - 数据库上的 Oracle ddl 触发器
- java - Java - 将一个文件中的内容逐块(例如 8 字节)交替写入多个文件
- manageiq - ManageIQ为Windows系统配置静态IP
- c - 如何在 C 中的 DO-WHILE 循环中添加多个参数
- java - 套接字,连接和断开
- amazon-web-services - ECS 中的 Fargate 任务无法使用 ECR 接口端点从 ECR 存储库中提取映像
- ios - Xamarin iOS - 为什么 Transporter 找不到我的图标?