能否在CSS的url()调用中传入元素ID以引用SVG sprite中指定的symbol？

问题根本原因 #

<symbol> 标签本身是SVG中的模板元素，默认不会被直接渲染，仅能被<use>标签引用后才会生成可视元素。浏览器解析CSS background-image 加载的外部SVG时，不会自动将URL片段指向的<symbol>转换为可视内容，因此直接使用url("sprite.svg#symbol_1")的写法无法生效。而<img>、<use>标签本身支持解析SVG内部引用规则，所以可以正常识别片段标识符。

可行解决方案 #

方案1：改造SVG雪碧图适配CSS片段引用（最推荐） #

仅需修改你的SVG雪碧图内部结构，新增匹配片段标识符的显示逻辑，改造后即可自由切换不同ID的symbol，无需修改其他业务逻辑：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!-- 你原来的所有symbol都放在这里，保持原有ID不变 -->
    <symbol id="symbol_1" viewBox="0 0 24 24">
      <!-- symbol原有路径内容 -->
    </symbol>
    <symbol id="symbol_2" viewBox="0 0 24 24">
      <!-- symbol原有路径内容 -->
    </symbol>
  </defs>

  <!-- 新增样式和引用节点，use的id加前缀避免和symbol id冲突 -->
  <style>
    .icon-use { display: none; }
    .icon-use:target { display: block; }
  </style>
  <use href="#symbol_1" id="i_symbol_1" class="icon-use" />
  <use href="#symbol_2" id="i_symbol_2" class="icon-use" />
</svg>

改造后CSS写法如下，修改后缀ID即可切换对应symbol：

background-image: url("sprite.svg#i_symbol_1");

逻辑说明：当URL后缀的片段ID匹配到某个<use>节点的ID时，:target伪类会生效，该节点会显示并引用对应ID的<symbol>渲染内容，实现按需显示指定图标。

方案2：直接内联SVG到CSS（适合图标数量少的场景） #

如果不想改动雪碧图，也可以将对应symbol提取出来转成独立的SVG代码，编码为data URI写入CSS：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='你的图标路径代码'/%3E%3C/svg%3E");

使用注意事项 #

• 要给<symbol>和SVG根节点设置正确的viewBox属性，避免图标拉伸变形
• CSS中需要配合background-repeat: no-repeat、background-size: contain使用，保证图标显示正常
• 外部SVG文件需要和页面同域，否则跨域限制会导致加载失败

内容的提问来源于stack exchange，提问作者snow-creature