＜img＞标签引入svg后，如何修改颜色

最新推荐文章于 2024-06-13 15:55:04 发布

har01d

最新推荐文章于 2024-06-13 15:55:04 发布

阅读量489

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_43951592/article/details/127062362

版权

<img class="photo" src="./1.svg">

下面这些样式，全部都不会有效果！

.photo{
    fill: red;
 }
.photo  svg{
    fill: red;
 }
.photo path{
  	fill: red;
}

答案如下：（不同颜色对应的代码，抄就完事了），
这个要理解其计算过程感觉还是很难的，

不知道各位有没有更简单易懂的实现方法

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}