svg 标签上填充属性的目的是什么？答案

【问题标题】：What is the purpose of fill attribute on svg tag?svg 标签上填充属性的目的是什么？
【发布时间】：2022-02-03 00:31:09
【问题描述】：

据我所知，SVG fill 属性用于绘制对象。根据MDN docs，fill 适用于以下元素：

<altGlyph> | <circle> | <ellipse> | <path> | <polygon> | <polyline> | <rect> | <text> | <textPath> | <tref> | <tspan>

但是，根 svg 元素也接受 fill 属性。最初，我以为它是为 SVG 设置 background-color，但事实并非如此！

那么svg标签上的这个属性有什么用呢？

【问题讨论】：

它“接受”该属性，当然，但<svg> 也毫无怨言地接受steve 属性 (demo)，尽管它没有任何用途、没有作用、没有功能或实用性;并且您引用和链接到的文档并不表明 "steve"、或 fill 是 <svg> 元素的有效属性。
@DavidThomas 我正在研究 Figma API，它返回 svg 和 fill 属性。为了清理这个 SVG，我需要了解为什么 Figma API 返回 svg 和 fill。连我都感到惊讶。

标签： css svg

【解决方案1】：

一个常见用例：图标着色
所有子元素都将继承父填充属性：

svg {
  display: inline-block;
  width: 5em;
}

body {
  color: red
}

<svg class="icon icon-prefix-home" id="icon-prefix-home" viewBox="0 0 34 48" fill="currentColor">
  <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</svg>

<svg class="icon icon-prefix-home" id="icon-prefix-home" viewBox="0 0 34 48" fill="currentColor">
  <path fill="green" d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</svg>

如果您的 svg 包含许多要重用的资产，例如 <use> 实例，则此方法很有用：

svg{
  display:inline-block;
  height:1em;
  vertical-align:-0.1em;
}

a{
  color: red;
  font-size:5em;
  text-decoration: none
}

<svg id="svgIcons" class="svgIcons" viewBox="0 0 100 100" style="display:none" xmlns="http://www.w3.org/2000/svg" >
      <symbol id="home" viewBox="0 0 34 48">
        <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
      </symbol>
      <symbol id="close" viewBox="0 0 27 48">
        <path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
      </symbol>
</svg>

<a href="#">
  <svg viewBox="0 0 34 48" fill="currentColor">
    <use href="#close" />
  </svg> currentColor
</a>

<a href="#">
  <svg viewBox="0 0 34 48">
    <use href="#home" />
  </svg> default Color
</a>

【讨论】：

我太傻了。我应该考虑 CSS 继承。感谢您的回答。
@Harshal Patil：一点也不傻！ svg 的属性继承模型在很多方面与 css 相似，但仍然不同。例如，样式属性可以很容易地省略，例如 fill，而几何属性（例如半径）是强制性的。此外，您对 GUI 应用程序、API 等生成的输出提出了一个很好的观点：很可能，您可以/应该从 svg 标记中删除一些无用的属性以促进您的开发任务。最终，仍然存在一些与渲染相关的问题（quantom、blink、webkit）——主要与浏览器对不合规标记的容忍度有关。