悬停时的 SVG 过滤器标签答案

【问题标题】：SVG Filter tag on hover悬停时的 SVG 过滤器标签
【发布时间】：2017-04-29 17:45:50
【问题描述】：

我正在尝试通过此过滤器为 SVG 设置动画：

<defs>
<filter id="green-fill" x="0%" y="0%">
  <feFlood flood-color="#fff"/>
  <feOffset dx="85">
    <animate attributeName="dx" from="0" to="85" dur="5s"/>
    </feOffset>
  <feComposite operator="in" in2="SourceGraphic"/>
  <feComposite operator="over" in2="SourceGraphic"/>
  </filter>
</defs>

当我尝试在悬停状态下触发动画时，我的真正问题出现了，页面加载时似乎正在播放动画。

我尝试使用纯 CSS 在悬停时添加过滤器，但没有机会：

 .item:hover .svg-fill path{ filter:url(#green-fill); }

我还发现这可以用 Javascript 完成，但同样没有成功。

这里是代码笔示例：CodePen

【问题讨论】：

标签： html css svg svg-filters svg-animate

【解决方案1】：

您可以在您的动画元素上设置begin="indefinite"，然后在您想要启动它时调用该元素上的 .beginElement() 函数。

function startAnimation() {
  anim.beginElement()
}

path {
  filter: url(#green-fill);
}

<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 25.54" width="100px" height="100px">
  <defs>
    <filter id="green-fill" x="0%" y="0%">
      <feFlood flood-color="#fff" />
      <feOffset dx="0">
        <animate id="anim" attributeName="dx" from="0" to="85" dur="5s" begin="indefinite" />
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  </defs>

  <path fill="#ea0097" d="M12.41,4.67a8,8,0,0,0-7.89,8.18A8,8,0,0,0,12.41,21a7.64,7.64,0,0,0,5-1.83l6.22-6.34L17.39,6.5a7.73,7.73,0,0,0-5-1.83m0,20.95A12.61,12.61,0,0,1,0,12.85,12.61,12.61,0,0,1,12.41.07a12.21,12.21,0,0,1,8,3l0.14,0.13L30,12.85l-9.62,9.79a12.23,12.23,0,0,1-8,3"
  />
</svg>
<button onclick="startAnimation()">start Animation</button>

【讨论】：