コード内で特定のSVGを使用すると、すべてのsvgの色が赤に変わります。

Webアプリケーションで使用するSVGアイコンがいくつかあります。彼らはすべて特定の色を持っています。色にかかわらず、すべてのSVGアイコンは2つの色（灰色と赤色）を持つ1つではなく1つの色を持っています。コード内で特定の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: '@' 
     } 
    }; 
}

私は私のコードで私のコンポーネントを使用することができますし、結合という名前のアイコンで、私は私が使用したいアイコンの名前を設定することができます：

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

を私のコンポーネントのディレクティブは、このようになります。

添付ファイルには、2色のアイコンがあります。これを自分のコンポーネントで使用すると、他のすべてのアイコンの色が赤色に変わり、その形状が変わります。

障害のあるアイコンを削除すると、他のすべてのアイコンは特定の色をしているように見えます。私はなぜこれが起こるのか分かりません、おそらく、欠陥のあるアイコンには2つの色がありますか？

私は、障害のあるアイコンの赤は、他のすべてのアイコンの赤と同じように、色が変わっていることに気付きました。

例：彼らの特定の色を持つと自分のコード内の障害のあるアイコンのない私のナビゲーションからアイコン：エラーと

例：私のナビゲーションのアイコンとすべての他のアイコンで私は自分のコードに障害のあるアイコンを使用するときに私のWebアプリは、この（赤と醜い形）のようになります。

を

FAULTY SVGのICON：

<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：

<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>

任意のアイデア？

出典

2017-04-26 MrBuggy

あなたは他のsvgのコードを提供できますか？ –

@CyrilBeeckmanはい、もちろん - 私は質問を編集しました:) – MrBuggy

あなたの問題を解決すればこの応答を検証することを忘れないでください;） –

あなたの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> 
 
\t 
 
<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-4{fill:none;stroke-miterlimit:10}#iStopIcon .cls-1{stroke:#e30613;stroke-width:2px}.cls-2{fill:#fff}.cls-3{fill:#8b8c8d}.cls-4{stroke:#fff} \t 
 
\t </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> 
 
\t 
 
<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style> 
 
\t #iArrowIcon .cls-1, .cls-4{fill:#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> \t 
 
</body> 
 
</html>

私は、IDを使用していますあなたが好む場合は、代わりにクラスを使用することができます。

出典

2017-04-26 08:23:58 azs06

パーフェクト、ありがとう！ – MrBuggy

自分のスタイルを使用して同じクラスを使用します。

あなたが最後のアイコンをロードすると、クラスの他の色のこのアイコン書き換えルールのCSS .cls-1

は、他のクラスを使用してSVGを変更したり、このようにCSSを経由して1色のSVGを記入してください：

.myIcon{ 
    fill: grey; 
}

出典

2017-04-26 08:03:55

また、ありがとうございます。私はazs06のソリューションを使用しました。乾杯！ – MrBuggy

コード内で特定のSVGを使用すると、すべてのsvgの色が赤に変わります。

答えて

関連する問題