Vue 引入 svg 图标 hover效果实现_IT百科

在项目中经常会用到svg图标，伴随着 hover 效果这样的需求，百度上一大堆人都在说修改 fill 属性就能实现，但结果都是毫无效果。来看看我是怎么修改的。本教程含如何在vue中引入svg和修改svg颜色，如果想直接看如何修改svg颜色请看最下边。

然后在mian.js 注册

svg 颜色绘制通常都是用 fill 来实现。

看上边的 fill 属性是个 none ，这样修改是方便咱们前端后期通过 color 来修改。注意哦，这个只适用于单色svg图标。后边的 fill 属性都要修改为 fill=currentColor 。一定是都要才会有效果哦！

svg颜色才会随着css color 一起修改哦

一般来说只是替换图片的话用css完成就好，例子如下：

<!DOCTYPE html>

<html>

<head>

<style>

#hover {

position:relative

margin:0 auto

}

#hover img {

position:absolute

left:0

-webkit-transition: opacity 2s ease-in-out

-moz-transition: opacity 2s ease-in-out

-o-transition: opacity 2s ease-in-out

transition: opacity 2s ease-in-out

}

#hover img.top:hover {

opacity:0

}

</style>

</head>

<body>

</div>>

</body>

</html>

这个是延时2秒的淡入淡出图片替换，供参考。望采纳，谢谢

欢迎分享，转载请注明来源：内存溢出

Vue 引入 svg 图标 hover效果实现