当我在代码中使用特定的 svg 时，所有 svg 的颜色都会变为红色

Posted 2023-03-06

技术标签:

【中文标题】当我在代码中使用特定的 svg 时，所有 svg 的颜色都会变为红色【英文标题】：All svg change their color to red when I use a specific svg in my code 【发布时间】：2017-09-23 11:50:32 【问题描述】：

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

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

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: '@'
        
    ;

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

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

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

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

我注意到，当所有其他图标改变颜色时，故障图标的红色与所有其他图标的红色相同。

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

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

错误的 SVG 图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4fill:none;stroke-miterlimit:10;.cls-1stroke:#e30613;stroke-width:2px;.cls-2fill:#fff;.cls-3fill:#8b8c8d;.cls-4stroke:#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"   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：

<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-1fill: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>

有什么想法吗？

【问题讨论】：

你能提供其他svg的代码吗？ @CyrilBeeckman 是的，当然 - 我编辑了我的问题 :) 如果这能解决您的问题，请不要忘记验证此回复；） 【参考方案1】：

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

你可以做的是，为故障图标添加一个父类或id，并用它来将它的css与其他的分开。

类似的东西。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>SVG ICONS</title>
</head>
<body>
	
<svg id="iStopIcon" class="iStopIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>
#iStopIcon .cls-1,#iStopIcon .cls-4fill:none;stroke-miterlimit:10#iStopIcon .cls-1stroke:#e30613;stroke-width:2px.cls-2fill:#fff.cls-3fill:#8b8c8d.cls-4stroke:#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"   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, .cls-4fill:#ccc;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>	
</body>
</html>

这里我用的是id，如果你愿意，你可以用class代替。

【讨论】：

【参考方案2】：

您的 svg 使用自己的风格并采用相同的类。

当你加载最后一个图标时，这个图标的 css 会为 class .cls-1 上的其他图标重写颜色规则

尝试使用其他类修改您的 svg 或通过 css 填充 1 种颜色的 svg，如下所示：