.SVG怎么显示（fadeIn部分图片）

Question

在我的dom中我有这样的代码：

<div class="icon-animated"><img src="icon_non_active.svg" id="icon_non_active"></div>

我有两个图标（.svg）：

icon_non_active & icon_active

是否可以动画从icon_non_active转换为icon_active并保持活动图标状态（还有一个圆圈）？

？

我试过这个plugin

但似乎不适合我的情况......

这是这个图标：

https://dl.dropboxusercontent.com/u/59666091/svg/icon_non_active.svg

https://dl.dropboxusercontent.com/u/59666091/svg/icon_active.svg

如何淡化这个红色区域？

Answer 1

您可以尝试相互重叠，因为两个图像相同但只是稍有不同，您可以使用不透明度来显示活动状态。

在此片段上悬停元素以查看它：

＆＃13;

＆＃13;

.icon-animated {
  position:relative;
}
.icon-animated img {
  position:absolute;
  top:0;
  left:0;
}
#icon_active {
  transition:opacity 1s linear;
  opacity:0;
}
.icon-animated:hover #icon_active {
  opacity:1;
}

＆＃13;

<div class="icon-animated">
  <img src="https://dl.dropboxusercontent.com/u/59666091/svg/icon_non_active.svg" id="icon_non_active">
  <img src="https://dl.dropboxusercontent.com/u/59666091/svg/icon_active.svg" id="icon_active">
</div>

＆＃13;

＆＃13;

＆＃13;