css之fill属性:

对于形状元素和文本，fill 属性是外观属性，用来定义给定图形元素内部的颜色。哪一块算是“内部”取决于形状本身以及fill-rule 属性的值。作为一个外观属性，它可以直接用作 CSS 样式表内部的属性。
  
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule
  
其中比较重要的:
下列元素可以使用fill属性：
动画元素 
形状元素 
文本内容元素:包括 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#textcontent, 就介绍了svg元素
  
重要的结论: 可以给 svg元素设置 color,那么就会改变 svg图片内容的颜色，这个也是和svg图片的fill属性相关的.
举个例子:
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24">
  <path fill="currentColor" d="M17 23v-4H7q-.825 0-1.412-.587T5 17V7H1V5h4V1h2v16h16v2h-4v4zm0-8V7H9V5h8q.825 0 1.413.588T19 7v8z"></path>
</svg>
  
样式:
.icon-container:hover :deep(svg) {
  @apply text-purple-600;
}

在这个 SVG 代码中,<path> 元素的 fill 属性被设置为 currentColor。这意味着它会继承当前元素的 color 值作为填充颜色。因此,当我们将 text-purple-600 应用于 SVG 元素时,它实际上是将 color 值设置为紫色,从而导致 <path> 元素的填充颜色也变为紫色。
所以,虽然 text-purple-600 的命名看起来像是用于设置文本颜色,但它同时也可以应用于 SVG 元素,从而改变 SVG 图形的颜色。这种机制使得我们可以使用相同的 CSS 类来设置文本和 SVG 图形的颜色,提高了代码的一致性和可维护性。

下面是一个官方实例:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" height="100%">
  <path
    fill="red"
    d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,80
           Q 10,60 10,30 z" />
</svg>
  
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/path, 这里我直接通过fill 设置颜色，结果可以生效，证明上面的理论是正确的.
  
解释： svg中 xmlns="http://www.w3.org/2000/svg"的作用:
xmlns="http://www.w3.org/2000/svg" 这个属性是用来定义 SVG 命名空间的。
命名空间是一种用来避免元素名称冲突的方法。由于 XML 允许组合不同的 XML 文档,因此有可能在同一个 XML 文档中出现相同的元素名称,但具有不同的含义和用途。为了解决这个问题,XML 命名空间就应运而生。
SVG 是基于 XML 的矢量图形语言,因此它也需要使用命名空间来确保元素名称在 XML 文档中的唯一性。xmlns="http://www.w3.org/2000/svg" 这个属性就是用来声明 SVG 元素所属的命名空间。
其中:
xmlns 是 "XML Namespace" 的缩写,表示这是一个 XML 命名空间声明。
http://www.w3.org/2000/svg 是 SVG 命名空间的 URI(Uniform Resource Identifier),这个 URI 是由 W3C(World Wide Web Consortium) 定义的,用于唯一标识 SVG 命名空间。
  
通过这个命名空间声明,浏览器就可以正确地识别和解析 SVG 元素,避免与其他 XML 语言中的元素发生冲突。