SVG Favicon 颜色更改答案

【问题标题】：SVG Favicon Color ChangeSVG Favicon 颜色更改
【发布时间】：2021-10-31 00:13:30
【问题描述】：

我希望你们每天/晚上都过得愉快。

所以我正在处理我的个人作品集，我使用 svg 作为图标，我有一组颜色，在刷新时随机选择我想根据分配给变量的颜色来更改图标有一种可能的方法吗？

HTML

<!DOCTYPE html>
<html lang="en" class="loaded">
<head>
  <link id="favicon" rel="shortcut icon" href="images/icon/icon.svg" sizes="any" type="image/svg+xml" >
<head>
.....
<script>
    $(document).ready(function () {
      // COLOR
      var colors = ["#00ffa2", "#660000", "#d70063", "#03e37f", "#a8a8c7", "#545435", "#413a97", "#c1c86b",
        "#c9f543", "#3207b8", "#ecdc29"
      ];
      var rand = Math.floor(Math.random() * colors.length);
      var randcol = rand + 1
    });
  </script>
</html>

我想将 randcol 分配给网站图标

【问题讨论】：

您不能通过 JS 动态更改 SVG favicon 的颜色。如果你想这样做，你需要创建多个不同颜色的 SVG 文件，然后通过 JS 更新 favicon URL。
哦，我看过多篇文章，他们将svg转换为具有某些功能并使用css变量获取颜色的图像
您可以在 SVG 文件本身中使用 CSS，有关如何执行此操作的更多信息 here，但您不能使用基于浏览器的 CSS 来影响图标 SVG 文件。

标签： javascript html jquery svg

【解决方案1】：

为此，我认为您需要修改 svg 内容，因此您应该使用 javascript 分配文档图标

【讨论】：