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

Posted 2023-03-06

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

【英文标题】：How to make .svg icon to react to disabled state and change it's color?

【发布时间】：2019-02-13 20:25:40

【问题描述】：

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

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

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

【参考方案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。