相关疑难解决方法(0)

我正在尝试将渐变应用于SVG rect元素.

目前,我正在使用该fill属性.在我的CSS文件中:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

rect在浏览器中查看时,元素具有正确的填充颜色.

但是,我想知道我是否可以对此元素应用线性渐变？

我有一个像这样的心脏 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）。

有没有办法实现这一目标？