怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法

最新推荐文章于 2025-04-10 17:01:06 发布

谢加油

最新推荐文章于 2025-04-10 17:01:06 发布

阅读量3.8w

点赞数 21

文章标签： javascript uni-app 前端 vue

本文链接：https://blog.csdn.net/weixin_42127307/article/details/125853584

版权

1.页面内引入svg

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>页面内引入svg</title>
</head>
<style>
	/* 悬浮改变颜色 */
	svg:hover{
		fill: #fa0;
	}
</style>
<body>
	<!-- 这个svg可以直接复制, 找ui拿svg图片 -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont" width="128" height="128">
	  <path d="M7,0 C10.866,0 14,3.13401 14,7 C14,10.866 10.866,14 7,14 C3.13401,14 0,10.866 0,7 C0,3.13401 3.13401,0 7,0 Z M9.4429,4.728 C9.25481111,4.57033778 8.98480222,4.57458765 8.80236711,4.7259234 L8.73839,4.78954 L6.04201787,8.00008603 L4.82568,6.95369 C4.64257778,6.79609 4.37737383,6.79416012 4.19297405,6.93752693 L4.12793,6.99808 L3.7861,7.37787 L3.7861,7.37787 C3.62538889,7.56339889 3.62541259,7.83351049 3.77399267,8.01823346 L3.83665,8.08317 L5.83351,9.8128 C6.02228333,9.96968889 6.29234457,9.9641284 6.47398923,9.81178052 L6.53763,9.7478 L6.85701787,9.36208603 L9.8876,5.7537 C10.0453778,5.56566444 10.0411802,5.29559037 9.88961591,5.11330165 L9.8259,5.04939 L9.4429,4.728 Z" transform="translate(1 1)" fill-rule="evenodd"></path>
	</svg>
</body>
</html>

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/e00f2e28ba6940bea8168ff7cb2233cf.png

2.img标签引入svg

此时css对svg文件无法生效，此时要用到CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>页面内引入svg</title>
</head>
<style>
	/* 悬浮改变颜色 */
	div{
		height: 100px;
		width: 100px;
		margin: 0 auto;
		overflow: hidden;
	}
	div img{
		height: 100px;
		width: 100px;
	}
	div:hover img{
		filter: drop-shadow(#ff0 100px 0);
		transform: translateX(-100px);
	}
</style>
<body>
	<!-- 这个svg可以直接复制上面的 -->
	<div>
		<img src="./1.svg">
	</div>
</body>
</html>