Html 当我在代码中使用特定的svg时，所有svg都将其颜色更改为红色

我有一些SVG图标，我在我的web应用程序中使用它们。它们都有特定的颜色。不管颜色如何，所有SVG图标都有一种颜色，而不是一种有两种颜色（灰色和红色）

我有一个角度组件来设置我的web应用程序中的图标。我的组件的指令如下所示：

import {constants} from '../../../index.constants';

export class MyIcon{
    public icon: string;
    public iconsPath: string = constants.PATH_TO_ICONS;
    public fileExtension: string = '.svg';

    static options: ng.IComponentOptions = {
        template: '<div ng-include="ctrl.iconsPath + ctrl.icon + ctrl.fileExtension"></div>',
        controllerAs: 'ctrl',
        controller: MyIcon,
        bindings: {
            icon: '@'
        }
    };
}

从'../../../../index.constants'导入{constants}；
导出类MyIcon{
公共图标：字符串；
public iconpath:string=constants.PATH\u TO\u ICONS；
公共文件扩展名：字符串='.svg'；
静态选项：ng.IComponentOptions={
模板：“”，
controllerAs:'ctrl'，
控制器：MyIcon，
绑定：{
图标：“@”
}
};
}

我可以在代码中使用我的组件，通过名为icon的绑定，我可以设置我要使用的图标的名称：

<my-icon icon="pencil"></my-icon>

在附件中，您可以找到带有两种颜色的图标。当我在我的组件中使用它时，所有其他图标的颜色都会变为红色，并且它们的形状也会改变

当我删除有故障的图标时，所有其他图标都有其特定的颜色，看起来就像它们必须看起来一样。我不知道为什么会发生这种情况，也许是因为有故障的图标有两种颜色

我注意到，错误图标的红色与所有其他图标的红色一样，当它们改变颜色时

示例：我的导航中带有特定颜色且代码中没有错误图标的图标：

错误示例：当我在代码中使用错误图标时，我的导航中的图标和我的web应用程序中的所有其他图标都是这样的（红色和丑陋的形状）：

有故障的SVG图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#e30613;stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#8b8c8d;}.cls-4{stroke:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>

<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>#iArrowIcon .cls-1{fill:none;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>

.cls-1、.cls-4{fill:none；stroke mit:10；}.cls-1{stroke:e30613；stroke width:2px；}.cls-2{fill:fff；}.cls-3{fill:8b8c8d；}.cls-4{stroke:fff；}.7

其他SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#e30613;stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#8b8c8d;}.cls-4{stroke:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>

<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>#iArrowIcon .cls-1{fill:none;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="&lt;Compound Path&gt;" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>

#iArrowIcon.cls-1{填充：无；笔划斜接限制：10；填充规则：偶数；}箭头

---

有什么想法吗？

您的svg使用自己的风格，并采用相同的课程

加载最后一个图标时，此图标的css将重写类

.cls-1

尝试使用其他类修改svg或通过css填充单色svg，如下所示：

.myIcon{
    fill: grey;
}

---

您的svg具有相同的类，导致问题的svg覆盖了其他svg中定义的css属性

您可以做的是，将父类或id添加到错误图标，并使用它将其css与其他css分开

像这样的

SVG图标
#iStopIcon.cls-1，iStopIcon.cls-4{填充：无；笔划斜接限制：10}iStopIcon.cls-1{笔划：e30613；笔划宽度：2px}。cls-2{填充：fff}。cls-3{填充：8b8c8d}。cls-4{笔划：fff}
资产7
#iArrowIcon.cls-1.cls-4{fill:#ccc；笔划斜接限制：10；填充规则：偶数；}箭头

您能提供其他svg的代码吗？@CyrilBeeckman是的，当然-我编辑了我的问题：）如果这能解决您的问题，请不要忘记验证此响应；）工作也谢谢。我用的是azs06的溶液。干杯