如何仅使用CSS同时更改多个SVG颜色

Question

HTML 这里所有的SVG都是黑色的，我想把它们改成蓝色。我只希望轮廓应该是浅蓝色，SVG的填充应该是紫蓝色

<div class="row">
<div class="owl-slider" style="width: 100% !important;">
<div id="carousel" class="owl-carousel">
<div class="item">
<img src="svg/001-ambulance.svg" id="svg">
<h6>Ambulance</h6>
</div>
<div class="item">
<img src="svg/002-ayurvedic.svg" id="svg">
<h6>Ayurvedic</h6>
</div>
<div class="item">
<img src="svg/003-blood-bank.svg" id="svg">
<h6>Blood Bank</h6>
</div>
<div class="item">
<img src="svg/004-hospital.svg" id="svg">
<h6>Click</h6>
</div>
<div class="item">
<img src="svg/005-tooth.svg" id="svg">
<h6>Dental Clinic</h6>
</div>
<div class="item">
<img src="svg/006-diet.svg" id="svg">
<h6>Dietician</h6>
</div>
<div class="item">
<img src="svg/007-doctor.svg" id="svg">
<h6>Doctor</h6>
</div>
<div class="item">
<img src="svg/008-syringe.svg" id="svg">
<h6>Equipements</h6>
</div>
</div>
</div>
</div>

CSS这里我没有给出任何颜色，只给出了高度和宽度

.item{
padding: 10px 35px;
display: grid;
place-items: center;
}
#svg{
height:100px;
width:100px;
}

所有代码都在这里

Answer 1

您可以使用CSS filter属性将SVG的外观更改为蓝色。但这只适用于黑色SVG的一个单一色调。如您在问题中所说，实现颜色变化的最佳方法是编辑SVG文件并手动设置它