从灰度转换 SVG，如 css3 过渡动画答案

【问题标题】：Transition an SVG from grayscale like css3 transition animation从灰度转换 SVG，如 css3 过渡动画
【发布时间】：2012-09-26 17:56:53
【问题描述】：

我正在尝试使用以下概述的技术将元素从灰度转换为彩色：

CSS

  .technical .tech-icon {
      width: 33px;
      height: 32px;
      display: inline-block;
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

      -webkit-transition: all 0.5s ease-out;  /* Safari 3.2+, Chrome */
         -moz-transition: all 0.5s ease-out;  /* Firefox 4-15 */
           -o-transition: all 0.5s ease-out;  /* Opera 10.5–12.00 */
              transition: all 0.5s ease-out;  /* Firefox 16+, Opera 12.50+ */
      }

对于 Firefox，我们有 filters.svg

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

如何模仿在 Chrome、IE9 等设备上运行的相同转换属性？

编辑：我希望让我的过渡属性与我的 Firefox SVG 修复程序一起使用。

【问题讨论】：

标签： css svg

【解决方案1】：

您可以在彩色版本上叠加一个额外的元素来保存灰度版本。然后为不透明度设置动画...

 .technical .tech-icon {
      position: relative;
      ...
  }

 .technical .tech-icon .grayscale {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      -webkit-filter: grayscale(1);
      filter: url(filters.svg#grayscale); /*Firefox*/
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
              filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*IE*/
  }

对于不支持 CSS 过渡的浏览器，您可以使用 jQuery 的 fadeIn() 为不透明度设置动画

【讨论】：

这是一个最优秀的方法。我一直在努力寻找一个跨浏览器的解决方案来解决这个问题，这不是完全疯狂，在我的初步测试中，这种技术符合要求。

【解决方案2】：

你可以这样使用：

@-webkit-keyframes grayscale-anim {
  from { -webkit-filter: grayscale(0); }
  to   { -webkit-filter: grayscale(1); }
}

.grayscale {
  -webkit-animation: grayscale-anim 2s ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
}

这里是小提琴演示：http://jsfiddle.net/SeL2G/

请注意，目前 CSS 过滤器仅在 webkit 浏览器中实现。出于兼容性原因，您可以使用 Javascript 作为后备解决方案。这是一个使用 Javascript 完成相同工作的小型库：http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

【讨论】：

OP 已经设法通过 CSS 过渡动画效果，他在询问如何在 IE 上应用相同的动画。
您好，这在 FF 中不起作用，我需要按照上面的 firefox 解决方案转换我的 svg..
好的，很抱歉造成误会。