SVG Filter tag on hover
<p>I am trying to animate an SVG which I managed to do via this filter:</p>

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

<p>my real problem comes when I am trying to trigger the animation on hover state,
it seems that the animation is taking place when the page is load.</p>

<p>I tried by adding the filter on hover with pure css but no chance:</p>

<pre><code> .item:hover .svg-fill path{ filter:url(#green-fill); }
</code></pre>

<p>Also I find that can be done with Javascript but again didn't had any success.</p>

<p>here is the codepen example:<a href="https://codepen.io/Sal4mander/pen/ZBqVaX" rel="nofollow noreferrer">CodePen</a></p>