在项目中经常会用到svg图标，伴随着 hover 效果这样的需求，百度上一大堆人都在说修改 fill 属性就能实现，但结果都是毫无效果。来看看我是怎么修改的。本教程含如何在vue中引入svg和修改svg颜色，如果想直接看如何修改svg颜色请看最下边。
然后在mianjs 注册
svg 颜色绘制通常都是用 fill 来实现。
看上边的 fill 属性是个 none ，这样修改是方便咱们前端后期通过 color 来修改。注意哦，这个只适用于单色svg图标。后边的 fill 属性 都 要修改为 fill=currentColor 。一定是都要才会有效果哦！
svg颜色才会随着css color 一起修改哦
第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static
第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的几个配置文件内的static更改为你自己所创建的静态资源目录，由于网上大多教程所改的地方都不够完全，还是会出现该问题，所以这也是今天为什么要写这篇文章的原因。
在命令行里面添加以下依赖
在使用vue脚手架的情况下，svg无法通过设置宽高进行大小的设置，其原因是因为svg的viewBox属性被vue脚手架关掉了，因此需要在在node_modules文件夹先找到svg-to-vue文件夹，然后进行修改
还有另外一种更加通用的方法，就是在 vueconfigjs 里面使用 option 写入配置
vue20之后配置都写在 vueconfigjs 文件中，这篇文章说一下项目常用的配置
由于所有的配置都被封装起来了，所以我们查看webpack配置，可以用以下几个命令
使用vue-cli创建一个项目，我们运行 vue inspect --rules 命令看一下输出
我们有这样一个需求：项目中想使用svg，但是不希望用默认的loader解析svg，所以我们要自己配置svg的规则
配置前我们需要明白怎样链式配置webpack，就是在 vueconfigjs 里面使用 chainWebpack 这个方法，不明白没关系，继续走。
1禁用webpack默认对svg解析的行为
2配置我们自己的规则解析svg
3封装一个组件，自动引入所有的svg
首先我们查看一下 svg 的默认配置，运行 vue inspect --rule svg 命令
看一下结果，可以成功显示
接下来 vueconfigjs 文件中，使用 chainWebpack 这个方法，这个方法会传入一个 config 参数，利用 configmodulerule() 这个方法，得到 svg 这个规则里面的详细配置信息，之后调用 exclude 这个Set对象的 add() 方法，将我们不希望处理的文件夹路径添加进去，从而完成禁用。
最后我们看一下配置完的 svg 之后的规则，有什么不同
禁用之后重新启动项目，ok，报错
安装依赖
使用 configmodulerule("icons") 创建一个icons规则
使用 vue inspect --rule icons 查看我们新配置的icons规则
到这一步我们的svg就算是配置成功，但是项目中不可能只有一个svg，我们不可能每次使用svg的时候都要引入，我们希望更加丝滑一些，所以我们要封装一个组件并且自动引入所有的svg
我们希望用的时候，传入一个名字就可以
新建Svgvue
在icons文件夹中新建indexjs
mainjs中引入
Appvue中使用这个组件
成功显示，配置成功
代码如下：
<html>
<head>
<meta >
最近项目中有一个需求，实现可配置的流程图。做之前也是调研了很多现成的插件，比如：gojs，G6，JSPlumb等，但是都不是太符合业务场景，都需要看文档，进行二次开发。最后决定还是自行开发吧，现在还没有开发完，这篇文章也当做是一个记录吧
先上图，看一下现在的效果。
因为传视频要冲会员，所以没有上传视频（太穷了。。。。）
根据后端返回的数据展示流程图，并且点击加号可以新增串行或并行的构建节点，同样，可以删除对应的节点及子任务
接下来，我会说一下我实现这个效果的思路
1我们的数据格式是JenkinsFile，可以自行百度一下
以上图为例：红色区域内为前端写死的，中间的数据是由后端返回的数据渲染出来的。所以我们要找出同样的内容作为一个div，并将它进行循环，上图中我把蓝色区域作为一个div，其中的
1箭头和椭圆形的节点分别是icon和一个div组成的
2利用伪类元素:before,:after写出前后面的两根线
3通过判断下标，决定是否两个元素中间需要连线，途中黑色区域的线是通过svg来实现
以上就是当前效果的一个实现思路，后续会不断更新。
以上就是关于Vue 引入 svg 图标 hover效果实现全部的内容，包括:Vue 引入 svg 图标 hover效果实现、vuepublic下放svg无法被htmllink引用、解决vue脚手架下svg无法改变大小等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）