怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

效果图

引入外部svg并改变颜色,javascript,uni-app,前端,vue

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>