CSS SVG：为什么外部样式表会覆盖内联样式

在本文中，我们将介绍为什么在CSS的可缩放矢量图形（SVG）中，外部样式表会覆盖内联样式的原因。首先，我们需要了解什么是SVG。

阅读更多：CSS 教程

什么是SVG？

可缩放矢量图形（Scalable Vector Graphics，简称SVG）是一种使用XML格式定义图形的标准。它通过文字提供了一种描述二维图形和图形应用程序的方法。与传统的栅格图像不同，SVG图形是基于矢量的，这意味着它们可以无限缩放而不会失去清晰度。

SVG具有许多优点，其中之一是可以通过CSS样式来美化图形。

CSS样式表如何应用于SVG?

当SVG图像嵌入到HTML页面中时，可以通过内联样式、内部样式表或外部样式表来为SVG应用CSS样式。

内联样式：直接在SVG标签内部使用style属性来添加CSS样式，例如：

<svg>
  <rect x="20" y="20" width="100" height="100" style="fill: blue; stroke: red;"/>
</svg>

在上面的例子中，style属性内的CSS样式将应用于矩形元素。

内部样式表：在SVG标签内部使用<style>标签来定义CSS样式，例如：

<svg>
  <style>
    .rect-style {
      fill: blue;
      stroke: red;
    }
  </style>
  <rect x="20" y="20" width="100" height="100" class="rect-style"/>
</svg>

在上面的例子中，CSS样式.rect-style将应用于矩形元素。

外部样式表：将CSS样式定义在一个外部的CSS文件中，然后通过link标签将其引入，例如：

<svg>
  <link rel="stylesheet" href="styles.css">
  <rect x="20" y="20" width="100" height="100" class="rect-style"/>
</svg>

在上面的例子中，styles.css中定义的CSS样式将应用于矩形元素。

为什么外部样式表会覆盖内联样式？

在SVG中，CSS样式的优先级规则与HTML中的规则类似。当多个不同来源的CSS应用于同一个元素时，会根据以下顺序确定优先级：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。也就是说，内联样式具有最高的优先级，会覆盖其他来源的样式。

然而，当使用外部样式表时，它的优先级是低于内联样式的。这是因为外部样式表是在SVG图像被解析之前就被加载和应用的，而内联样式是在SVG解析过程中应用的。

让我们来看一个示例来说明这一点：

<svg>
  <style>
    .text-color {
      fill: red;
    }
    #text-element {
      fill: blue;
    }
  </style>
  <text class="text-color" id="text-element" x="50" y="50">Hello, World!</text>
</svg>

在这个示例中，我们通过内部样式表为文本元素定义了CSS样式。.text-color选择器应用了红色的填充颜色，#text-element选择器应用了蓝色的填充颜色。

由于内部样式表的优先级高于外部样式表的优先级，所以文本元素的填充颜色将是蓝色，而不是红色。