通过<link>引用的SVG favicon能否使用全局CSS变量？

我通过<link>标签引入了一个可正常运行的SVG favicon：

<link id="favicon" rel="icon" type="image/x-icon" href="favicon.svg">

但无法从外部控制它的样式，尝试以下两种方式均无效：

1. 外部CSS设置<link>元素的fill：

<head>
  <style>#favicon { fill: red!important; }</style>
  <link id="favicon" rel="icon" type="image/x-icon" href="assets/favicon.svg" fill="red">
  ...
</head>

2. SVG内部尝试继承外部样式或变量：

<svg fill='inherit'>
  <style>
    .fav-path-1 { fill: var(--favicon-color) } <!-- 无效 -->
    .fav-path-1 { --favicon-color: blue; fill: var(--favicon-color) } <!-- 有效 -->
    .fav-path-1 { fill: inherit; } <!-- 无效 -->
  </style>
  <path class="fav-path-1" ...>
</svg>

请问是否可以从SVG外部控制其样式？

核心结论 #

通过<link>标签独立引入的SVG favicon，无法直接通过主页面的CSS或属性控制其内部样式。原因是这种方式加载的SVG属于独立资源，和主页面DOM环境完全隔离，主页面的CSS规则、自定义变量无法渗透到SVG内部。

为什么你之前的尝试无效？ #

• 给<link>标签设置fill属性或CSS样式：<link>是DOM中的元素，不是SVG内部的图形元素，这些样式不会传递到SVG内部的<path>等元素上。
• SVG内部用fill: inherit：SVG作为独立资源，它的样式继承链仅限于自身内部，根元素的fill没有从外部获取到有效值，所以继承无效。
• 外部定义的--favicon-color变量：独立加载的SVG无法共享主页面的CSS变量环境，所以无法读取外部定义的变量值。

可行的解决方案 #

想要从外部控制SVG favicon的样式，需要通过JavaScript动态修改SVG内容后，再更新favicon的引用。以下是两种常用方法：

方法1：动态修改SVG内容并转为Data URI

先加载SVG文件，替换内部的样式或变量，再将修改后的SVG转为Data URI设置给<link>的href。

示例代码：
假设你的SVG文件（favicon.svg）内容如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <style>
    .fav-path-1 { fill: var(--favicon-color, blue); }
  </style>
  <path class="fav-path-1" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

用JavaScript动态修改颜色：

// 定义修改favicon颜色的函数
function setFaviconColor(targetColor) {
  fetch('favicon.svg')
    .then(response => response.text())
    .then(svgContent => {
      // 替换SVG内部的颜色变量默认值
      const updatedSvg = svgContent.replace(
        'var(--favicon-color, blue)',
        `var(--favicon-color, ${targetColor})`
      );
      // 转为Data URI
      const dataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(updatedSvg)}`;
      // 更新favicon引用
      document.getElementById('favicon').href = dataUri;
    });
}

// 调用示例：将favicon设置为红色
setFaviconColor('red');

方法2：内联SVG + Canvas绘制

将SVG内联到页面中，用CSS控制内联SVG的样式，再通过Canvas绘制SVG并转为PNG格式的Data URI作为favicon。

示例代码：

<!-- 页面中隐藏的内联SVG -->
<svg id="hidden-favicon" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path class="fav-path" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>

<!-- 原favicon引用 -->
<link id="favicon" rel="icon" type="image/png" href="">

<script>
// 将内联SVG绘制到Canvas并更新favicon
function updateFavicon() {
  const svgEl = document.getElementById('hidden-favicon');
  const canvas = document.createElement('canvas');
  canvas.width = 24;
  canvas.height = 24;
  const ctx = canvas.getContext('2d');

  const svgData = new XMLSerializer().serializeToString(svgEl);
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    document.getElementById('favicon').href = canvas.toDataURL('image/png');
  };
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgData)}`;
}

// 初始设置颜色并更新
document.getElementById('hidden-favicon').querySelector('.fav-path').style.fill = 'green';
updateFavicon();

// 后续修改颜色的函数
function changeFaviconColor(color) {
  document.getElementById('hidden-favicon').querySelector('.fav-path').style.fill = color;
  updateFavicon();
}
</script>

内容的提问来源于stack exchange，提问作者Ben Racicot