在悬停时向下滑动svg填充

Question

我有一个svg我想在悬停时填充背景并让它向下滑动，我做了悬停效果但我不能让填充滑下来悬停我怎么能这样做？这是我的代码：

$.fn.dataTable.ext.errMode = 'throw';

我想做这样的动画：

svg:hover{ 
    fill: #080; 
}

Answer 1

那怎么样？它使用SMIL为渐变色标设置动画，从而移动红色/蓝色转换点。

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg"
 width="226" height="226">
  <defs>
    <linearGradient id="MyGradient" x2="0%" y2="100%">
      <stop offset="0%"  stop-color="red">
        <animate attributeName="offset" from="0%"
  to="100%" dur="1s" begin="c.mouseover" 
  fill="freeze"/>
        <animate attributeName="offset" from="100%"
  to="0%" dur="1s" begin="c.mouseout" 
  fill="freeze"/>
  </stop>
          <stop offset="0%"  stop-color="blue"/>
      </linearGradient>
  </defs>
  <circle id="c" cx="110" cy="107" r="80" stroke="black"
      stroke-width="5" fill="url(#MyGradient)" />
</svg>

＆＃13;

＆＃13;

＆＃13;