vue-admin-template框架下修改svg的颜色-程序员宅基地

技术标签: svg  前端  

嘿嘿,好久不更博客啦。突然记起这个修改svg颜色这个挺好玩的,记录一下。哈哈哈哈,没想到svg还能这样玩。

需求:vue-admin-template里面某个模块鼠标滑过时里面的图标变颜色

首先解决方案有很多,改background-image,改img的路径。我都觉得这些最终都是要换图片,有没有直接在图片的基础上改个颜色就ok的。哈哈,svg一下子映入脑子。这玩意阿里icon-font都可以改颜色,啧啧,那么我是不是也可以尝试。

说干就干。百度走一波,首先看到一个哥们的博客。如图:

https://blog.csdn.net/weixin_41615439/article/details/107181777

懒得点开链接的,我就把代码放进来看:

.svg{
    fill:currentColor;
    color:red;
}

看完直接上手。发现,咦?好像还是不行啊。然后再找一篇

https://blog.csdn.net/kaimo313/article/details/107772602

嗯,这哥们说的就是在vue中,怎么将svg集成能改颜色的,主要css代码如下:

.svg-icon {
  fill: currentColor; //此属性为更改svg颜色属性设置
  stroke: currentColor;
  overflow: hidden;
}

但是,这个并不没有实现我鼠标划过就能改色,解决不了问题,然后,我发现一哥们,直接暴力改颜色,哎,可惜了,忘记收藏那个哥们的链接地址,不然也要推一波。最给力是他教我改fill变成currentColor。

来,直接上修改方案,

第一步,进到svg的代码,在path里面找到fill然后修改成fill="currentColor"

<svg id="_1.Bace基础_3.Icon图标_文件_folder" data-name="1.Bace基础/3.Icon图标/文件/folder" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect id="folder_Background_" data-name="folder (Background)" width="16" height="16" fill="none"/>
  <path id="folder" d="M12,11.5H1a1,1,0,0,1-1-1V1A1,1,0,0,1,1,0H4.091l.131.1,1.94,1.4H12a1,1,0,0,1,1,1v8A1,1,0,0,1,12,11.5ZM1,1v9.5H12v-8H5.838l-.131-.1L3.767,1Z" transform="translate(1.5 2.5)" fill="currentColor" />
</svg>

第二步,修改类名

.svg{
    fill:currentColor;
    color:rgba(51, 51, 51, 0.8);
}

第三步,鼠标经过对应div,修改hover事件

.node:hover .svg{fill:currentColor;color: #001B84}

经上,完成了svg的改色。嘿嘿,有意思吧,冷门吧,解决了开心不。哈哈哈。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34672907/article/details/123974652

智能推荐

mysql启动报错“NET HELPMSG 3534“的解决办法-程序员宅基地

文章浏览阅读1.1k次。原因:mysql安装步骤错误,从mysql5.7.6开始,mysql需要这样安装:mysqld--initialize-insecure或者mysqld--initializemysqld -installnet start mysqlmysqld--initialize-insecure自动生成无密码的root用户,mysqld--initializ..._more information is available by typing net helpmsg 3534.

区块链学习资源链接_metachain2023.github.io-程序员宅基地

文章浏览阅读831次。区块链如今已经被作为国家战略大力发展,可是各种学习资料并不集中,如果你感兴趣的话收藏这些区块链学习相关的技术网站和分析网站。不定时更新......_metachain2023.github.io

Linux(CentOS7)安装Redis7并启动_centos7启动redis-程序员宅基地

文章浏览阅读1.3k次。Linux(CentOS7)安装Redis7并启动_centos7启动redis

Linux下的信号_linux 限定 信号 只能在同一个组内发送-程序员宅基地

文章浏览阅读174次。信号1、信号的概念共性简单。不能携带大量信息。满足某个特设条件才能发送。机制A给B发送信号,B收到信号前执行自己的代码,收到信号好后,不管执行到程序的什么位置,都要暂停运行, 去处理信号,处理完毕再继续运行。与硬件中断类似,但信号是软件层面上实现的终端,常称为“软中断”。每个进程收到的所有信号,都是由内核负责发送的,内核处理。阻塞信号集(信号屏蔽字)将某些信号加入集合,对他们设置屏蔽,当屏蔽x信号后,再收到该信号,该信号的处理将推后(解除屏蔽后),未决信号集的对应信号位置将不再立_linux 限定 信号 只能在同一个组内发送

HDD鸿蒙开发者日资料汇总-程序员宅基地

文章浏览阅读299次。4月17日上午九点半,HarmonyOS开发者日的活动,已徐徐拉开序幕。在开发者如云的现场,来自华为的技术专家们为大家解读HarmonyOS的技术,以及实践内容。现场直播回看地址、专家的演...

vue 开发拖拽签章功能。 主要应用,pdf 合同 盖章, 文件水印, 图文打码_移动端拖动签章-程序员宅基地

文章浏览阅读9.2k次,点赞2次,收藏21次。实现原理)通过拖拽功能实现 (主要vue代码,通过后台将pdf转换 统一格式的图片,前端分页 再不同页面添加签章。)签章 使用draggable="true" @dragstart="drag($event)"签章容器 使用@drop="drop($event, docindex+1)" @dragover="allowDrop($event)"本源码实现是pdf ..._移动端拖动签章

随便推点

超实用且高效的线框设计工具_uzer.meuzer.-程序员宅基地

文章浏览阅读1.1k次。Moqups—在线Mockup线框工具[https://moqups.com]Fluid UI—Android、 iOS、Windows App在线原型线框工具[https://fluidui.com/demos]Pencil—GUI原型工具(开源)UXToolbox—基于Windows的线框ToolMockups.me—UI线框应用Live Wires_uzer.meuzer.

通过socket实现不同两台电脑上的进程通信_两台pc间程序之间实现通讯-程序员宅基地

文章浏览阅读3k次。发送# send_infoSockin = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # new socketSockin.bind(('192.168.31.102', 23001)) # socket bind this computer ip and portdata_to_json = json.dumps(ir_se..._两台pc间程序之间实现通讯

html5弹性盒子模型,推荐10款弹性盒子源码(收藏)-程序员宅基地

文章浏览阅读298次。为父容器添加display:flex/inline-flex 父容器可以使用的属性有:1.flex-direction:决定主轴的方向有四个属性值:row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2.flex-wrap:如果一条轴线排不下,如何换行。..._哪些标签可以做弹性盒子

低功耗蓝牙芯片智能照明解决方案_蓝牙灯控解决方案-程序员宅基地

文章浏览阅读412次。智能照明是目前智能家居中普遍的应用,可实现节能省电和提供更高的舒适性和便利性。智能照明是指利用物联网技术、有线/无线通讯技术、电力载波通讯技术、嵌入式计算机智能化信息处理,以及节能控制等技术组成的分布式照明控制系统,来实现对照明设备的智能化控制。蓝牙智能照明支持场景:点对点遥控智能灯;该方案通过标准蓝牙协议,在巨微的低成本解决方案上实现LED灯的调光调色。备选芯片型号:MS1793,MS1591。点对组或多组遥控智能灯(MG-Mesh);该方案采用巨微创新的MG-Mesh系统架构,用最低成本实_蓝牙灯控解决方案

动画黄金搭档:CADisplayLink & CAShapeLayer_caanimation 和cadisplaylink-程序员宅基地

文章浏览阅读187次。CADisplayLink是计时器,它的频率和屏幕刷新频率同步。CADisplayLink *dl = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateWave:)]; [dl addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonMo_caanimation 和cadisplaylink

光纤卡学习资料保存:98-基于FPGA Spartan6 的双路光纤PCIe采集卡(2路光纤卡)_pcie光纤采集卡-程序员宅基地

文章浏览阅读292次。基于FPGA Spartan6 的双路光纤PCIe采集卡(2路光纤卡) 1、板卡概述   板卡采用xilinx Spartan6系列芯片,支持 PCI Express Base Specification 1.1 x1。内含丰富的逻辑资源和存储单元,板卡FPGA外接双片32M*16bit DDR2缓存器,支持乒乓操作。PCI Express接口大..._pcie光纤采集卡

推荐文章

热门文章

相关标签