我有一个心形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
属性(因此我无法使用 @keyframes
将背景位置从左到右移动)。
有什么方法可以实现这一点吗?