如何仅使用 CSS 一次更改多个 SVG 颜色 [重复]

Posted

技术标签:

【中文标题】如何仅使用 CSS 一次更改多个 SVG 颜色 [重复]【英文标题】:How to change multiple SVG colours at once using CSS only [duplicate] 【发布时间】:2021-07-26 04:28:25 【问题描述】:

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;

所有代码都在这里

【问题讨论】:

编辑 SVG 文件并更改其中的颜色。 您不能更改作为 img 的 SVG 的内部颜色 【参考方案1】:

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

【讨论】:

以上是关于如何仅使用 CSS 一次更改多个 SVG 颜色 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?

使用 CSS 更改 svg 图像的颜色 [重复]

将svg添加到网页? [复制]

svg - 使用 css 更改 svg 颜色并加载外部精灵

使用 css 更改颜色 svg 文件