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

2024-01-27 11:03:31 作者:欧亿体育

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>
效果图

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>
效果图

3.封装组件

如果项目中用到svg比较多,前两种方法会比较啰嗦,每次写一遍方法二的样式比较麻烦,这时可以考虑封装组件, 结合实际需要, 这里就不展开了,可以看下以下文章

vue里怎么修改svg的颜色?https://blog.csdn.net/kaimo313/article/details/107772602

在线咨询 拨打电话

电话

010-67916526

微信二维码

微信二维码