Question

这是我的svg图标。当我在网站上使用时，它会变黑。

编辑：添加了site link

/* I'm using this css for icons */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFAD3E;}
	.st1{fill:#6B5456;}
</style>
<g>
	<circle class="st0" cx="34.5" cy="10.2" r="10.2"/>
	<path class="st0" d="M84.2,91.2c-2-5.6-3.4-10.4-4.5-14.7c-1.3-4.6-2.3-8.2-3.7-11.1c-3-5.8-7.4-7-10.6-7c-5.8,0-12.2-0.1-17-0.3
		l-2.8-18.2c3,1.8,6.2,3.5,9.6,4.5c2.4,0.7,4.8,1.1,7.1,1.1c3.8,0,7.4-1,10.9-3c2.5-1.4,3.4-4.7,1.9-7.2c-1.4-2.5-4.7-3.4-7.2-1.9
		c-6.6,3.8-12.4,0.5-21.3-5.3c-1.7-1.1-3.5-2.2-5.3-3.3c-2-1.9-4.8-2.9-7.8-2.5c-5,0.8-8.5,5.5-7.7,10.5l4.5,29.6
		c0.5,3.4,2.9,6.1,5.9,7.2c0.8,0.4,1.8,0.8,3,0.9c0.6,0.1,1.4,0.2,2.3,0.2c1.6,0.1,3.9,0.2,6.7,0.3c4.9,0.2,10.9,0.3,15.9,0.3
		c0.8,1.6,1.8,5.4,2.7,8.4c1.2,4.3,2.6,9.6,4.9,15.7c1,2.7,3.5,4.3,6.2,4.3c0.7,0,1.5-0.1,2.3-0.4C83.7,98.4,85.5,94.6,84.2,91.2z"
		/>
	<path class="st1" d="M56.6,74.9c-13.1,1.5-21.1,0.6-25.4-2.8c-4.8-3.9-5.7-12-6.8-23.3c-0.3-3.3-0.7-6.8-1.2-10.6
		c-0.3-2.2-2.3-3.7-4.4-3.4c-2.2,0.3-3.7,2.3-3.4,4.4c0.5,3.7,0.8,7.1,1.2,10.4c1.3,12.7,2.3,22.7,9.7,28.7
		c4.4,3.5,10.7,5.2,19.7,5.2c3.4,0,7.2-0.2,11.5-0.7c2.2-0.2,3.7-2.2,3.5-4.4C60.7,76.2,58.8,74.7,56.6,74.9z"/>
</g>
</svg>

在我的网站上：

我在这样的网站上使用

.hakkimizda-info__container{display:flex}@media (max-width: 768px){.hakkimizda-info__container{flex-direction:column}}.hakkimizda-info__item{flex:1;display:flex;flex-direction:column;padding:0 80px 50px}@media (max-width: 768px){.hakkimizda-info__item{flex-direction:row;padding:20px 0}}.hakkimizda-info__item:not(:last-child){border-right:2px solid;border-image:linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), rgba(0,0,0,0.1), transparent) 1}@media (max-width: 768px){.hakkimizda-info__item:not(:last-child){border-image:linear-gradient(to right, transparent, rgba(0,0,0,0.1), rgba(0,0,0,0.1), transparent) 1;border-right:none;border-bottom:2px solid}}.hakkimizda-info span{display:block}.hakkimizda-info__icon{font-size:48px;flex-shrink:0;color:initial !important;line-height:1}@media (max-width: 768px){.hakkimizda-info__icon{margin-right:20px}}.hakkimizda-info__title{font-weight:800;color:#6b5456;font-size:22px;margin:10px 0;line-height:1}@media (max-width: 768px){.hakkimizda-info__title{margin-top:0}}.hakkimizda-info__txt{color:#5f5656;font-weight:400;font-size:18px}

<div class="hakkimizda-info">
    <div class="custom-container">
        <div class="hakkimizda-info__container">
            <div class="hakkimizda-info__item">
                <span class="hakkimizda-info__icon">
                    <svg class="icon icon-konfor"><use xlink:href="assets/img/icons.svg#icon-konfor"></use></svg>
                </span>
                <div class="flex-column">
                    <span class="hakkimizda-info__title">
                        KONFORLU ULAŞIM
                    </span>
                    <span class="hakkimizda-info__txt">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis possimus veniam quasi officia deleniti, est eos! Libero, iste, odio amet fuga quod architecto, corporis impedit cum delectus magni ducimus facere.
                    </span>
                </div>
            </div>
            <div class="hakkimizda-info__item">
                <span class="hakkimizda-info__icon">
                    <svg class="icon icon-konfor"><use xlink:href="assets/img/icons.svg#icon-design"></use></svg>
                </span>
                <div class="flex-column">
                    <span class="hakkimizda-info__title">
                        ÖZEL TASARIM İÇ DİZAYN
                    </span>
                    <span class="hakkimizda-info__txt">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis possimus veniam quasi officia deleniti, est eos! Libero, iste, odio amet fuga quod architecto, corporis impedit cum delectus magni ducimus facere.
                    </span>
                </div>
            </div>
            <div class="hakkimizda-info__item">
                <span class="hakkimizda-info__icon">
                    <svg class="icon icon-konfor"><use xlink:href="assets/img/icons.svg#icon-donanim"></use></svg>
                </span>
                <div class="flex-column">
                    <span class="hakkimizda-info__title">
                        SIFIR VE SAĞLAM DONANIM
                    </span>
                    <span class="hakkimizda-info__txt">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis possimus veniam quasi officia deleniti, est eos! Libero, iste, odio amet fuga quod architecto, corporis impedit cum delectus magni ducimus facere.
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

嗨

尝试删除

<style type="text/css"> .st0{fill:#FFAD3E;} .st1{fill:#6B5456;} </style>

来自您的svg精灵文件

Answer 2

从CSS代码中删除填充和描边。

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

如何使svg原始颜色？

2 个答案: