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

米柆

已于 2024-04-26 08:05:03 修改

阅读量658

点赞数 5

分类专栏： Millia's work 文章标签： css 前端

于 2024-04-25 09:19:02 首次发布

本文链接：https://blog.csdn.net/millia/article/details/138175131

版权

Millia's work 专栏收录该内容

58 篇文章 4 订阅

订阅专栏

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>
<!--渐变色设置结束-->