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

谢加油

35491人浏览 · 2022-07-18 16:40:50

谢加油 · 2022-07-18 16:40:50 发布

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>

效果图

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

3.封装组件

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

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

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的