如何从CSS向作为背景图的SVG文件传递参数？

当SVG作为CSS背景图加载时，无法使用SVG Ref模块的参数机制（该机制依赖<object>等嵌入标签将参数传递到SVG文档上下文），但可以通过内联JavaScript解析URL查询参数来实现动态修改SVG内容，完全不需要内联HTML，仅需在SVG文件中添加少量脚本。

实现步骤 #

1. 修改SVG文件，添加参数解析脚本 #

在SVG文件中加入一段脚本，读取URL中的查询参数，动态修改目标元素的属性（比如fill颜色）：

<svg xmlns="http://www.w3.org/2000/svg" width="110" height="40">
  <!-- 脚本解析URL参数并修改样式 -->
  <script type="text/javascript">
    // 解析URL查询参数
    const searchParams = new URLSearchParams(window.location.search);
    // 获取myparam参数，默认值设为blue
    const targetColor = searchParams.get('myparam') || 'blue';
    // 找到目标矩形并设置填充色
    const rect = document.querySelector('rect');
    if (rect) rect.setAttribute('fill', targetColor);
  </script>
  
  <!-- 初始设默认样式，兼容JS禁用场景 -->
  <rect x="5" y="5" width="100" height="30" rx="15" ry="15" fill="blue" />
</svg>

2. 在CSS中使用带参数的SVG背景图 #

直接在CSS中引用带查询参数的SVG文件即可：

.element {
  background-image: url("mysvg.svg?myparam=red");
  background-size: contain;
  background-repeat: no-repeat;
  width: 110px;
  height: 40px;
}

注意事项 #

• 缓存问题：浏览器会将不同参数的SVG视为不同资源缓存，如果需要频繁修改参数，可在URL后追加随机字符串（如?myparam=red&v=1）避免旧缓存干扰。
• JS禁用兼容：SVG中预设了默认fill值，即使浏览器禁用JavaScript，也会显示默认样式。
• 跨域限制：如果SVG和当前页面不在同一域名下，需确保SVG文件的CORS设置允许脚本执行（背景图加载的SVG通常不受跨域脚本限制，因为它是作为图像资源加载，脚本运行在SVG自身的上下文）。

为什么SVG Ref模块不生效？ #

你提到的参数变量方案依赖SVG Ref模块，该模块需要通过<object>、<iframe>等嵌入标签将参数传递到SVG的文档上下文。但当SVG作为CSS背景图加载时，它是作为图像资源被渲染，不属于当前HTML文档树的一部分，无法接收宿主环境传递的参数，因此ref元素无法生效。

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