CSS SVG 填充色不起作用

在本文中，我们将介绍CSS中SVG填充色不起作用的问题。SVG（可缩放矢量图形）是一种使用XML描述二维图形的格式，而CSS是用于控制网页上元素样式的语言。使用CSS的fill属性可以指定SVG元素的填充色，但在某些情况下，填充色可能无法正常显示。我们将探讨可能的原因，并提供解决方法。

阅读更多：CSS 教程

填充色不显示的原因

CSS优先级问题：CSS属性具有不同的优先级顺序。如果在添加填充色的CSS规则中，其优先级比其他规则要低，则填充色可能无法正常显示。
解决方法：可以通过提高填充色CSS规则的优先级来解决该问题。可以使用!important关键字或更具体的选择器。

例如，使用!important关键字：
```
rect {
   fill: red !important;
}
```
或者使用更具体的选择器：
```
#mySvg rect {
   fill: red;
}
```
SVG内联样式：在SVG文件中，元素的样式可以通过内联样式属性直接指定。如果SVG元素具有内联样式属性，它将覆盖通过CSS规则指定的样式。
解决方法：可以通过删除SVG元素的内联样式属性来解决该问题，或者使用CSS覆盖内联样式。

例如，删除内联样式属性：
```
<rect fill="red" />
```
或者使用CSS覆盖内联样式：
```
rect[style] {
   fill: red;
}
```
SVG嵌套问题：在一些情况下，SVG元素可能被嵌套在其他元素中，例如标签。在这种情况下，填充色可能会受到嵌套元素的影响。
解决方法：可以通过直接给嵌套元素添加填充色，或者在CSS规则中通过更具体的选择器来解决该问题。

例如，直接给嵌套元素添加填充色：
```
<use fill="red" xlink:href="#myRect" />
```
或者使用更具体的选择器：
```
use[fill] {
   fill: red;
}
```

填充色不显示的示例

下面是一个填充色不显示的示例代码：

<svg width="200" height="200">
  <!-- 使用CSS规则指定填充色 -->
  <rect class="myRect" width="100" height="100" />
</svg>

<style>
  /* CSS规则指定填充色 */
  .myRect {
    fill: red;
  }
</style>

在这个示例中，我们试图使用CSS规则给rect元素指定填充色为红色。然而，如果我们打开浏览器并查看示例，我们会发现填充色并没有显示出来。这可能是由于前面提到的问题造成的。

为了解决这个问题，我们可以使用更具体的选择器：