动画/过渡svg过滤图像元素

Question

嘿,我在你的网站上显示了很多商业图标.我想添加与它们相关的炫酷动画.我认为图标会保持灰色,直到你将它们悬停.然后他们慢慢变色.首先,我做了这个效果filter: grayscale(100%).但是这些图标有不同的灰色阴影,看起来很糟糕.然后我找到了一个svg过滤器,如下所示.不幸的是,我不知道如何为此过滤器设置过渡效果的动画.所以我正在寻找帮助来使这个动画工作或以另一种方式来实现这样的效果.

img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
  transition: filter 2s;
  -webkit-transition: filter 2s;
}
img:hover {
  -webkit-filter: none;
  filter: none;
}

<svg style="position: absolute; width: 140px; height: 140px;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="luminanceToAlpha" result="L2A"></feColorMatrix>
      <feFlood flood-color="#b3b4bd" result="colorfield"></feFlood>
      <feBlend mode="multiply" in="L2A" in2="colorfield"></feBlend>
      <feComposite operator="in" in2="SourceGraphic"></feComposite>
    </filter>
  </defs>
</svg>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

Answer 1

动画css过滤器标签充其量是不可靠的,应该避免.还有其他动画SVG过滤器的方法,所以不用担心

在开始之前,我想指出代码中与解决方案无关的缺陷,但希望您可以从中学习:

您已将SVG设置为position: absolute;并为其指定大小,以便在其他内容之上呈现.这对::hover伪选择器来说很困惑.将visibility: hidden;样式添加到SVG以消除闪烁

现在解决方案.在HTML中有很多动画元素的方法.最常见的是javascript/jQuery和CSS动画/过渡.几乎在每种情况下,CSS动画和过渡都应该足够,但是有些CSS属性不受支持,并且会立即改变而不是转换.在这种情况下,幸运的是我们可以使用SVG动画

SVG动画允许我们更改SVG过滤器的属性.在我们这样做之前,我们应该简化您的SVG过滤器的代码,以便我们可以为单个属性设置动画.

img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
}

<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="matrix" values="0 0 0 0.6 0  0 0 0 0.6 0  0 0 0 0.6 0  0 0 0 1 0"></feColorMatrix>
    </filter>
  </defs>
</svg>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

如果您运行上面的代码,您应该获得灰色显示.我们使用颜色矩阵创建了这个.我们根据像素的alpha属性设置红色,绿色和蓝色组件.

现在我们可以添加一个SVG动画

$('#my-img').on('click',function(oEvent) {
  $('#gray-filter-anim-in')[0].beginElement();
});

#my-img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="matrix" values="0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 1 0">
        <animate id="gray-filter-anim-in"  attributeName="values" attributeType="XML" begin="indefinite" dur="2" end="indefinite" from="0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 1 0" to="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" fill="freeze" />
      </feColorMatrix>
    </filter>
  </defs>
</svg>
<img id="my-img" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

必须在另一个定义中声明SVG动画(在这种情况下,在我们希望设置动画的滤镜元素中).它具有以下属性

attributeName = The property name on the filter that will be changing
attributeType = "XML"
begin         = The time offset until the animation begins. Indefinite stops it from triggering automatically so we can trigger it
end           = The time offset until the animation ends
dur           = The time duration the animation will run for. Default unit is seconds
from          = The value of the filter's property at the start of the animation
to            = The value of the filter's property at the end of the animation

如果我们访问动画DOM对象,我们可以通过调用其beginElement方法来触发动画.要结束动画,请调用endElement方法.通过设置fill="freeze"我们告诉动画在持续时间结束时停止,而不是将过滤器恢复为其初始属性.

这是实现动画淡入和动画淡出的完整代码

var fFadeIn = function(oEvent) {
  document.getElementById('gray-filter-anim-in').beginElement();
};

var fFadeOut = function(oEvent) {
  document.getElementById('gray-filter-anim-out').beginElement();
};

$('#my-img').hover(fFadeIn,fFadeOut);

#my-img {
  -webkit-filter: url(#gray-filter);
  filter: url(#gray-filter);
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
  <defs>
    <filter id="gray-filter">
      <feColorMatrix type="matrix" values="0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 1 0">
        <animate id="gray-filter-anim-in" attributeName="values" attributeType="XML" begin="indefinite" dur="0.5" end="indefinite" to="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" fill="freeze" />
        <animate id="gray-filter-anim-out" attributeName="values" attributeType="XML" begin="indefinite" dur="0.5" end="indefinite" to="0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 0.5 0  0 0 0 1 0" fill="freeze" />
      </feColorMatrix>
    </filter>
  </defs>
</svg>
<img id="my-img" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />

请注意:我删除了动画的from属性和endElement方法调用,这样如果你在图像褪色时将鼠标移出图像,它就不会跳转.我还为图像添加了边框,以便您可以看到鼠标悬停在图像上

我在以下博客文章中找到了所有这些信息 :https://satreth.blogspot.co.za/2013/01/animating-svg-filters.html

祝好运