如何避免CSS背景图缓存？SVG动画背景失效问题求助

这个缓存坑我之前也踩过，尤其是不能用脚本的限制下确实有点棘手。除了直接把SVG嵌入HTML，这里还有几个靠谱的方案可以试试：

1. 用SVG内部动画代替外部CSS动画 #

把原本写在CSS里的动画逻辑直接搬到SVG文件内部，使用SVG原生的<animate>、<animateTransform>或者<animateMotion>元素。这样一来，SVG自身就包含了动画指令，不管浏览器是否缓存SVG文件，只要加载这个SVG，内部的动画就会自动执行，不会因为缓存跳过动画触发。

举个路径描边动画的例子：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path d="M20,20 L180,20 L180,180 L20,180 Z" stroke="#000" stroke-width="2" fill="none">
    <animate
      attributeName="stroke-dasharray"
      from="0 560"
      to="560 0"
      dur="2s"
      repeatCount="indefinite" />
  </path>
</svg>

这种方式下，哪怕SVG被缓存，每次作为背景图加载时，内部的动画都会从头开始执行。

2. 将SVG内联为CSS Data URI #

把整个SVG代码转换成Data URI格式，直接写在CSS的background-image属性里。因为这个SVG是内联在CSS中的，浏览器不会单独缓存这个SVG文件，每次加载CSS时都会重新解析这个SVG内容，自然就能触发动画了。

示例代码：

.your-target-div {
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M20,20 L180,20 L180,180 L20,180 Z" stroke="#000" stroke-width="2" fill="none"><animate attributeName="stroke-dasharray" from="0 560" to="560 0" dur="2s" repeatCount="indefinite" /></path></svg>');
}

注意要处理好SVG代码里的特殊字符（比如引号），可以用单双引号嵌套的方式避免语法错误，或者提前转义特殊字符。

3. 服务器端配置禁用SVG缓存 #

如果你的服务器配置权限允许，可以给SVG文件添加Cache-Control: no-cache或者Pragma: no-cache的响应头，强制浏览器每次都重新请求SVG文件，而不是使用本地缓存的版本。不过这个方案依赖服务器配置，如果你没有服务器操作权限的话可能没法实施。

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