svg图标填充渐变色及CSS鼠标悬停纯色渐变色转换

 svg图标填充渐变色及CSS鼠标悬停纯色渐变色转换:

HTML:

<!--底部导航-->
<ul class="milliaNav">
<li class="active"><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><!--当前导航active渐变色设置可以放在任意svg内部-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--当前导航active渐变色设置结束--><path d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path></svg>
<h6><span>首页</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M64.67 512c2.03-148.27 27.78-271.04 103.07-344.26C240.96 92.45 363.73 66.7 512 64.67c148.27 2.03 271.04 27.78 344.26 103.07C931.55 240.96 957.3 363.73 959.33 512c-2.03 148.27-27.78 271.04-103.07 344.26C783.04 931.55 660.27 957.3 512 959.33c-148.27-2.03-271.04-27.78-344.26-103.07C92.45 783.04 66.7 660.27 64.67 512z" p-id="39514"></path><path d="M676.18 470.84l-243-135.24c-31.39-17.47-70 5.23-70 41.16v270.48c0 35.93 38.61 58.63 70 41.16l243-135.24c32.26-17.96 32.26-64.36 0-82.32z" fill="#FFFFFF" p-id="39515"></path></svg>
<h6><span>短视频</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M855.466667 200.533333C765.866667 110.933333 640 59.733333 514.133333 64c-130.133333-2.133333-256 46.933333-345.6 136.533333-83.2 85.333333-128 196.266667-125.866666 311.466667 0 78.933333 21.333333 155.733333 57.6 221.866667l-29.866667 87.466666c-10.666667 32-4.266667 66.133333 19.2 91.733334 19.2 21.333333 42.666667 32 70.4 32 6.4 0 10.666667 0 17.066667-2.133334l132.266666-23.466666c61.866667 27.733333 130.133333 40.533333 200.533334 40.533333h10.666666c125.866667 0 245.333333-49.066667 332.8-136.533333 85.333333-85.333333 130.133333-196.266667 125.866667-311.466667 4.266667-117.333333-40.533333-226.133333-123.733333-311.466667zM512 746.666667c-132.266667 0-238.933333-104.533333-238.933333-234.666667 0-23.466667 19.2-42.666667 42.666666-42.666667s42.666667 19.2 42.666667 42.666667c0 83.2 68.266667 149.333333 153.6 149.333333s153.6-66.133333 153.6-149.333333c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666666 42.666667c0 130.133333-106.666667 234.666667-238.933333 234.666667z"></path></svg>
<h6><span>客服</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M621.7088 164.5696H402.2912c-45.44 0-82.2912-36.8384-82.2912-82.2912C320 36.8384 356.8384 0 402.2912 0h219.4304C667.1616 0 704 36.8384 704 82.2912c0 45.44-36.8384 82.2784-82.2912 82.2784z"></path><path d="M857.6 64h-125.7856a95.63264 95.63264 0 0 1 5.4784 32c0 53.0176-42.9824 96-96 96h-256c-53.0176 0-96-42.9824-96-96 0-11.2256 1.9456-21.9904 5.4784-32H166.4c-56.5504 0-102.4 45.8496-102.4 102.4v755.2c0 56.5504 45.8496 102.4 102.4 102.4h691.2c56.5504 0 102.4-45.8496 102.4-102.4V166.4c0-56.5504-45.8496-102.4-102.4-102.4z m-83.9168 622.08c0 28.2752-22.9248 51.2-51.2 51.2H301.5168c-28.2752 0-51.2-22.9248-51.2-51.2s22.9248-51.2 51.2-51.2h420.9792c28.2752 0 51.1872 22.9248 51.1872 51.2z m0-230.4c0 28.2752-22.9248 51.2-51.2 51.2H301.5168c-28.2752 0-51.2-22.9248-51.2-51.2s22.9248-51.2 51.2-51.2h420.9792c28.2752 0 51.1872 22.9248 51.1872 51.2z"></path></svg>
<h6><span>订单</span></h6></a>
</li>
<li><a href="#">
<svg class="icon" viewBox="0 0 1024 1024"><path d="M598.9 557.7H424.7c-162 0-293.7 133.6-293.7 297.8v17.7C131 959 260.6 959 424.7 959h174.2c157.6 0 293.7 0 293.7-85.9v-17.7c0-164.1-131.7-297.7-293.7-297.7zM503.1 63c-128.2 0-232.6 105.9-232.6 236s104.3 236 232.6 236c128.2 0 232.6-105.9 232.6-236S631.3 63 503.1 63z"></path></svg>
<h6><span>我的</span></h6></a>
</li>
</ul>
<!--底部导航结束--><!--当前导航active渐变色设置 渐变配置也可以单独放但是会占空间 需放置在单独svg内-->
<svg>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<svg>
<!--当前导航active渐变色设置结束-->

CSS:

/*navCss*/
.milliaNav{position:fixed;left:0;bottom:0;width:100%;display:flex;align-items:center;justify-content:space-evenly;background:#fff;padding:3vw 0;z-index:999;}
.milliaNav li,.milliaNav li a{display:flex;justify-content:center;flex-direction:column;}
.milliaNav li h6{position:relative;font-size:3.6vw;font-weight:normal;}
.milliaNav li .icon{fill:#bebebe;height:7vw;width:auto;margin-bottom:1vw;}
.milliaNav li.active,.milliaNav li:hover{color:#0096ff}
.milliaNav li.active .icon,.milliaNav li:hover .icon{fill:url(#gradient);}
.milliaNav li.active h6:after,.milliaNav li:hover h6:after{content:"";display:block;position:absolute;left:50%;bottom:1vw;width:2vw;height:2vw;border-radius:4vw;background:#0096ff;margin-left:-1vw;}
.milliaNav li.active h6 span,.milliaNav li:hover h6 span{color:#fff;}

 说明:

<!--直接应用-->
<svg class="icon" viewBox="0 0 1024 1024"><!--渐变色设置 注:id="gradient"-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--渐变色设置结束--><!--path中使用渐变  注:fill="url(#gradient)"-->
<path fill="url(#gradient)" d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path>
</svg><!--结合css控制-->
<svg class="icon" viewBox="0 0 1024 1024"><!--渐变色设置 注:id="gradient"-->
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<!--渐变色设置结束--><!--path中不设置fill 多色除外-->
<path d="M605.866667 981.333333v-234.666666c0-51.84-33.621333-93.866667-75.093334-93.866667h-37.546666c-41.472 0-75.093333 42.026667-75.093334 93.866667V981.333333H268.672A85.333333 85.333333 0 0 1 183.466667 896.341333V512h657.066666v384.341333c0 46.933333-38.186667 84.992-85.205333 84.992H605.866667zM185.130667 511.786667H89.6a46.933333 46.933333 0 0 1-29.013333-83.882667l422.4-375.210667a46.933333 46.933333 0 0 1 58.026666 0l422.357334 375.466667a46.933333 46.933333 0 0 1-29.013334 83.84l-90.709333-0.213333H185.173333z"></path>
</svg>
<!--css部分配置fill 注:fill:url(#gradient)-->
<style>
.xxx.active,.xxx:hover{fill:url(#gradient);}
</style><!--渐变配置也可以单独放但是会占空间 需放置在单独svg内-->
<svg>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a52ff" />
<stop offset="100%" stop-color="#0c8bfe" />
</linearGradient>
</defs>
<svg>
<!--渐变色设置结束-->

参考:

SVG 线性渐变icon-default.png?t=N7T8https://www.w3school.com.cn/graphics/svg_grad_linear.asp

SVG 径向渐变icon-default.png?t=N7T8https://www.w3school.com.cn/graphics/svg_grad_radial.asp

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/3682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1分钟掌握 Python 函数参数

任何编程语言函数都是非常重要的一部分&#xff0c;而在进行函数调用时&#xff0c;了解函数的参数传递方式是非常有必要的。Python中支持哪些传参方式呢&#xff1f; Python中的传参方式是比较灵活的&#xff0c;主要包括以下六种&#xff1a; 按照位置传参按照关键字传参默…

力扣--N皇后

题目: 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。…

李彦宏:程序员将不复存在! 周鸿祎回怼!网友:先把百度程序员都开除了!

近日&#xff0c;百度创始人、董事长兼首席执行官李彦宏在央视《对话》•开年说的访谈中指出&#xff1a;“基本上说以后其实不会存在“程序员”这种职业了&#xff0c;因为只要会说话&#xff0c;人人都会具备程序员的能力”。 “未来的编程语言只会剩下两种&#xff0c;一种…

Java进阶-异常处理

概述 常见运行时异常 直接继承自RuntimeException或者子类&#xff0c;编译阶段不会报错&#xff0c;运行时可能出现的错误 运行时异常&#xff1a;一般是程序员业务没有考虑好或者是编程逻辑不严谨引起的程序错误 数组索引越界异常空指针异常类型转换异常数学操作异常数字转…

离线语音模块初步学习——LSYT201B(深圳雷龙发展)

一 、产品简介 首先简单介绍下该离线语音模块&#xff0c;官方给出的介绍是&#xff1a;YT2228 是根据智能语音交互市场需求及思必驰算法的发展方向定义开发的 “芯片算法”人工智能人机语音交互解决方案&#xff0c;具有高性能、低功耗等特点。该芯片通过软硬融合的方法&…

数据丢失的谜团:文件突然不见了,却还占用着空间

在数字化时代&#xff0c;数据的重要性不言而喻。然而&#xff0c;有时我们会遇到一个令人困惑的问题&#xff1a;明明存储在设备中的文件突然不见了&#xff0c;但磁盘空间仍被占用。这种情况究竟是怎么回事&#xff1f;我们又该如何找回这些“消失”的文件呢&#xff1f;接下…

微服务(学习)

1.Spring Cloud 5大组件有哪些&#xff1f; 一般认为的Spring Cloud五大组件是 Eureka / nacos : 注册中心 Ribbon : 负载均衡 Feign : 远程调用 Hystrix : 服务熔断 Zuul/Gateway : 网关2.服务注册和发现是什么意思&#xff1f;Spring Cloud 如何实现服务注册发现&…

ROS python实现乌龟跟随

产生两只乌龟&#xff0c;中间的乌龟(A) 和 左下乌龟(B), B 会自动运行至A的位置&#xff0c;并且键盘控制时&#xff0c;只是控制 A 的运动&#xff0c;但是 B 可以跟随 A 运行 乌龟跟随实现的核心&#xff0c;是乌龟A和B都要发布相对世界坐标系的坐标信息&#xff0c;然后&am…

vue3组件 描点定位以及监听滚动切换对应activeTab

描点定位以及监听滚动切换对应activeTab 基本逻辑 init 初始化 获取滚动区域内所有非文本子节点offsetTopArr 存储所有子节点的高度scroll 监听滚动的距离&#xff0c;找到还在可视区的元素高度 <template><div class"tab-list"><div v-for"i…

力扣HOT100 - 994. 腐烂的橘子

解题思路&#xff1a; 因为要记录轮数&#xff08;分钟数&#xff09;&#xff0c;所以不能一口气遍历到底&#xff0c;所以不能用深搜&#xff08;bfs&#xff09;&#xff0c;而要用广搜&#xff08;bfs&#xff0c;层序遍历&#xff09;。 先记录下新鲜橘子数&#xff0c;…

理解控制反转

好久之前写的学习笔记&#xff0c;一直落在草稿箱里今天才发现&#xff0c;既然写了就补发出来吧~ 当需要实现不同操作时&#xff0c;用户和程序员都无需修改&#xff0c;只需要修改xml配置即可。 代码体现&#xff1a; 不同接口的实现类&#xff1a; xml具体配置 通过set注入…

GO语言写Prometheus自定义node-exporter的Docker容器测试

1. 安装docker-compose 执行以下命令&#xff0c;安装docker-compose到CentOS7.9环境中&#xff1a; # 下载二进制文件 sudo curl -L "https://github.com/docker/compose/releases/download/v2.24.7/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/d…

后端面试---分布式微服务

分布式&微服务 分布式1、什么时候用到分布式开发三级目录 微服务 分布式 1、什么时候用到分布式开发 三级目录 微服务 1、谈谈你对微服务的理解&#xff0c;什么时候用微服务 2、若A服务请求B服务B1接口&#xff0c;B1接口又请求A服务的A2接口&#xff0c;会不会有问题…

Qt : 在QTreeWidget中添加自定义右键菜单

一、引言 如图&#xff0c;我们需要在一个QTreeWidget 控件中添加了自定义右键菜单。 二、思路 如何做到的呢&#xff0c;很简单。浅浅记录和分享一下。 继承QTreeWidget&#xff0c;定义一个子类CustomTreeWidget &#xff0c;在重写contextMenuEvent 事件即可。 三、代…

单链表(详解)

目录 一.链表的介绍二.链表的各种方法单链表的结构初始化链表为链表开辟新节点打印链表尾插头插尾删头删查找指定位置之前插入指定位置之后插入删除(pos)节点删除节点&#xff08;pos&#xff09;之后的节点链表的销毁&#xff08;节点被一个一个地销毁&#xff09; 一.链表的介…

linux调试-访问物理地址

1. devmem 方式 rootraspberrypi:/home/niyu# busybox devmem 0x7e215000 8 0xa rootraspberrypi:/home/niyu# busybox devmem 0x7e215000 8 0x0A rootraspberrypi:/home/niyu# busybox devmem 0x7e215000 8 0xb rootraspberrypi:/home/niyu# busybox devmem 0x7e21500…

如何制作个性又美观的二维码?自定义Logo、样式,还能一键复用

草料二维码提供基础的二维码美化设置&#xff0c;包含Logo、颜色、码点码眼、容错、添加文字等设置。 还提供150标签样式&#xff0c;标签样式中所有内容&#xff0c;包括LOGO、背景、字段数量等&#xff0c;均可修改。 同时&#xff0c;支持将样式保存到账号下&#xff0c;方…

磨损对输送带安全的影响

磨损对输送带安全的影响 在工业生产中&#xff0c;输送带作为重要的物流传输设备&#xff0c;广泛应用于煤炭、化工、冶金、电力、建材等多个行业。然而&#xff0c;输送带在使用过程中不可避免地会出现磨损现象&#xff0c;这不仅会影响其使用寿命&#xff0c;还可能对生产安…

vue-router学习3:路由传参方式

路由传参的方式主要有两种&#xff1a;query传参和params传参。 1. Query 传参 首先&#xff0c;在路由配置文件中&#xff08;通常是 router/index.ts&#xff09;&#xff0c;定义你的路由&#xff1a; import { createRouter, createWebHistory } from vue-router; imp…

从递归角度串联二叉树-图论-动态规划

一、深度理解二叉树的前中后序遍历 二叉树遍历框架如下&#xff1a; void traverse(TreeNode* root) {if (root nullptr) {return;}// 前序位置traverse(root->left);// 中序位置traverse(root->right);// 后序位置 }先不管所谓前中后序&#xff0c;单看 traverse 函数…