如何使 .svg 图标对禁用状态做出反应并更改其颜色？

Question

基本上，当图标处于活动状态时，我们应该显示 .svg icon #1，当它被禁用时，我们应该显示 .svg icon #2（基本上在任何给定时间显示这两者之一，具体取决于图标的状态按钮图标）。

问题是它是一个自定义 .svg，所以我必须使用 Angular 1.x 和 md-svg-icon="path\...\icon.svg" 理想情况下我只想向静态导入添加 1 个图标然后将 fill: white 更改为 css 属性（我在其他相关问题中发现了这一点），但是在这里您可以看到我不能对整个图片使用填充（应该保留一部分红色，只有另一个应该改变颜色）这使解决方案复杂化。

我想到的另一个选择是将它与 ng-style 指令（和一些 isIconDisabled 标志连接到控制器），并将这两个图标添加到静态导入，然后显示第一个一个或另一个。是否有意义？不幸的是，我对 AngularJS 没有那么多经验。

Answer 1

您可以通过设置 svg 图标的特定元素的样式来更改图标的外观。不过以后图标一变就有点麻烦和不方便了

我会选择你的第二个选项，并使用标志来控制各州的图标。基本上你只需切换图标与元素的状态（例如按钮）：

<button ng-click="doSmth()" ng-disabled="btnDisable">
  <img ng-src="{{activeButtonIconURL}}" ng-if="!btnDisable">
  <img ng-src="{{disabledButtonIconURL}}" ng-if="btnDisable"> 
</button>

这是上述示例的有效 plunker。

如何使 .svg 图标对禁用状态做出反应并更改其颜色？

How to make .svg icon to react to disabled state and change it's color?

css

svg

angularjs

angularjs-directive