svg中的填充属性不能在mat-icon中覆盖

Question

我想为svg图片使用mat-icon但我无法更改fill颜色。问题是svg的属性fill设置为#000000，无法以任何可能的方式覆盖。

在组件中：

this._iconRegistry.addSvgIcon('close', this._sanitizer.bypassSecurityTrustResourceUrl('/assets/images/ic_clear_black_24px.svg'));

在HTML模板中：

<span class="auth--icon">
    <mat-icon svgIcon="close"></mat-icon>
</span>

CSS：

svg {
    color: red !important;
    fill: currentColor !important;
}

如果我将此代码放在element.style中，则可以覆盖此代码。

例如在Angular Material svg[Attributes Style]上没有fill属性，一切正常。

更新2018-04-12

我终于找到了问题的原因。在我的reset.css文件中，我定义了类似的内容：

svg {
  /*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
  */
  overflow: hidden;
}

我无法覆盖其他svg个文件中.scss元素的样式。

Answer 1

对于 angular material 示例，您的CSS规则已应用，因为您的<path>元素确实没有其他fill规则集而不是从.mat-icon继承的规则集{ {1}}一个（将其设置为currentColor）。

但是当fill元素上设置了<path>属性时，此规则优先于继承的属性。

幸运的是，它仍然是一个糟糕的规则，所以你可以很容易地覆盖它：

.mat-icon {
  fill: red;
}
.mat-icon rect { /* change 'rect' to whatever tag you target */
  fill: green;
}
/* you can even set it to 'inherit' and it will work */
.mat-icon rect:hover {
  fill: inherit;
}

<div class="mat-icon">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <rect x="0" y="0" width="100" height="100" fill="orange"/>
  </svg>
</div>

现在，您可能会遇到一些您没想到的事情，那就是现在应该填充fill="none"属性的路径。
为了解决这个问题，你必须让你的选择器更复杂一些：

.mat-icon {
  fill: red;
}
/* beware it doesn't handle all possibilities of transparency, there are too many... */
.mat-icon path:not([fill='none']):not([fill="transparent"]){
  fill: inherit;
}

.bad-icon {
  fill: red;
}
.bad-icon path {
  fill: inherit;
}

<div class="mat-icon">
<svg xmlns="http://www.w3.org/2000/svg">
    <path fill="none" d="M0 0h24v24H0z"></path>
    <path fill="orange" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
</svg>
</div>

<div class="bad-icon">
<svg xmlns="http://www.w3.org/2000/svg">
    <path fill="none" d="M0 0h24v24H0z"></path>
    <path fill="orange" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
</svg>
</div>