Github README自定义SVG动态badge数值不更新问题如何解决

GitHub的内容安全策略（CSP）会禁用所有SVG文件中嵌入、引用的JavaScript代码，你依赖的客户端参数替换逻辑在README的渲染环境中完全不会执行，只会显示SVG源码里写死的默认值5，只有直接在本地浏览器打开原始链接的时候，浏览器才会运行JS得到正确数值。

推荐用服务端动态生成SVG的方案，完全规避JS执行限制：

• 把原来的静态SVG+JS逻辑替换成服务端接口：接口收到请求时直接从URL参数中提取years值，把数值直接写入SVG对应节点后，设置Content-Type: image/svg+xml响应头返回内容即可。
  给个简单的PHP实现示例，你可以把原有的svg文件改成badge.php，代码如下：

<?php
header('Content-Type: image/svg+xml');
// 读取参数，默认值为5
$years = htmlspecialchars($_GET['years'] ?? '5');
?>
<svg width="200" height="75" xmlns="http://www.w3.org/2000/svg"
style="user-select: none;">
<g>  
  <rect x="0" y="0" width="125" height="75" style="fill:#F84949F5"></rect>
  <text x="0" y="37.5" font-family="Segoe UI" font-size="16"  font-weight="bold" fill="white">
    <tspan x="62.5" text-anchor="middle" dy="-3.5%">I started</tspan>
    <tspan x="62.5" text-anchor="middle" dy="25%">programming</tspan>
  </text>
  <rect x="124" y="0" width="75" height="75" style="fill:#F84949"></rect>
  <text x="124" y="75" font-family="Segoe UI" font-size="13" fill="white" font-weight="bold">
    <tspan x="162.5" text-anchor="middle" y="45.891675" font-size="40" id="years-number"><?php echo $years; ?></tspan>
    <tspan x="162.5" text-anchor="middle" y="67.5"  font-weight="bold">years ago</tspan>
  </text>
</g>
</svg>

之后你在README里引用这个php接口的地址即可，比如![No](http://luigitest.altervista.org/widget/badge.php?years=9)

• 如果没有可用的服务端运行环境，也可以用云函数、GitHub Actions等方案实现动态生成逻辑，核心思路都是不依赖客户端JS，直接返回已经替换好数值的静态SVG内容。

GitHub的CDN会对引用的静态资源做缓存，如果后续修改参数后显示没更新，可以给请求URL加额外的随机参数（比如?years=9&v=1）来绕过缓存，也可以在服务端设置合适的Cache-Control响应头控制缓存时长。

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