悬停时的SVG过滤器标签 [英] SVG Filter tag on hover
问题描述
< defs>我试图通过这个过滤器设置一个SVG动画。
< filter id =green-fillx =0%y =0%>
< feFlood flood-color =#fff/>
< feOffset dx =85>
< / feOffset>
< / filter>
< / defs>
当我试图在悬停状态下触发动画时,出现真正的问题
it看起来这个动画是在加载页面时发生的。
我尝试在悬停时使用纯css添加过滤器,但没有任何机会:
.item:hover .svg-fill path {filter:url(#green-fill); }
另外我发现可以用Javascript来完成,但是再次没有任何成功。 p>
这里是codepen示例: CodePen
您可以在animate元素上设置 begin =indefinite
,然后调用该元素上的.beginElement()函数来启动它。
function startAnimation(){anim.beginElement()}
path {filter:url(#green-fill);}
< svg data-name =Layer 1xmlns =http ://www.w3.org/2000/svgviewBox =0 0 30 25.54width =100pxheight =100px> < DEFS> < filter id =green-fillx =0%y =0%> < feFlood flood-color =#fff/> < feOffset dx =0> < animate id =animattributeName =dxfrom =0to =85dur =5sbegin =indefinite/> < / feOffset> < feComposite operator =inin2 =SourceGraphic/> < feComposite operator =overin2 =SourceGraphic/> < /滤光器> < / DEFS> <路径填充=#ea0097d =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动画< / button>
I am trying to animate an SVG which I managed to do via this filter:
<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>
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.
I tried by adding the filter on hover with pure css but no chance:
.item:hover .svg-fill path{ filter:url(#green-fill); }
Also I find that can be done with Javascript but again didn't had any success.
here is the codepen example:CodePen
you can set begin="indefinite"
on your animate element, and then call the .beginElement() function on that element whenever you want to start it.
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>
这篇关于悬停时的SVG过滤器标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!