我有一些SVG圖標,我在我的web應用程序中使用它。他們都有特定的顏色。無論顏色如何,所有SVG圖標都有一種顏色,而不是一種,它有兩種顏色(灰色和紅色)。當我在我的代碼中使用特定的svg時,所有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: '@'
}
};
}
我可以用我的成分在我的代碼,並用結合命名圖標,我可以設置圖標的名字,我想使用:
<my-icon icon="pencil"></my-icon>
在附件中,您可以找到帶有兩種顏色的圖標。當我在我的組件中使用它時,所有其他圖標的顏色變爲紅色,並且它們的形狀也發生變化。
當我刪除錯誤的圖標時,所有其他圖標都有其特定的顏色,看起來像他們必須看。我不知道爲什麼會發生這種情況,也許是因爲錯誤的圖標有兩種顏色?
我注意到,當它們改變顏色時,錯誤圖標的紅色與所有其他圖標中的紅色相同。
示例:從我的導航圖標與他們特定的顏色,沒有在我的代碼中的錯誤圖標:
例,出現錯誤:在我的導航圖標和所有其他圖標我的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="<Compound Path>" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>
任何想法?
你能提供其他svg的代碼嗎? –
@CyrilBeeckman是的,當然 - 我編輯了我的問題:) – MrBuggy
不要忘記驗證此答覆,如果這能解決您的問題;) –