本文介绍了如何将动画渐变添加到svg路径?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的心脏svg路径如下:

I have a heart svg path like so:

<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>

我想在上面添加渐变效果,并从左向右移动渐变,就像心脏在闪烁一样.

And I'd like to add a gradient effect on it and move the gradient from left to right, as if the heart is shimmering.

但是,path不接受background属性,如果我使用fill,则它不接受渐变作为值.它也没有background-position属性(因此我可以使用@keyframes从左向右移动background-position).

However, path doesn't accept a background property and if I use fill, it doesn't accept gradient as a value. It also doesn't have a background-position property (so that I can move the background-position from left to right by using @keyframes).

有没有办法做到这一点?

Is there a way to achieve this?

推荐答案

您可以使用 SVG的SMIL动画.想法是为颜色停止点或渐变的偏移量设置动画以创建所需的效果:

You can use the SMIL animation of SVG. The idea is to animate the color-stop or the offset of the gradient to create the needed effect:

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动画以轻松地为背景属性设置动画:

Another idea is to consider the path inside a mask then you run a CSS animation to easily animate the background properties:

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>

相关问题以获取有关背景计算的更多详细信息:使用百分比值和线性梯度上的背景位置

Related question to get more detail about background calculation: Using percentage values with background-position on a linear-gradient

这篇关于如何将动画渐变添加到svg路径?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 04:10
查看更多