能否使用CSS选中作为伪元素background-image的SVG内部图层？

通过background-image引入的SVG属于外部图像资源，和当前页面的DOM树完全隔离，页面CSS无法穿透到图像内部选中元素，你在审查工具中看不到SVG内部的图层ID是正常现象，不存在通过页面CSS直接选中background-image内部SVG节点的方法。

以下方案均不需要修改页面HTML，仅通过自定义CSS即可实现需求：

• 方案1：将样式内嵌到SVG内部，再转成data URI引入
  你可以直接修改导出的SVG源文件，在

  <svg id="CircleButton" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
    <style>
      #Bullet {
        fill: orange;
      }
      #Ring {
        stroke: blue;
        stroke-width: 2;
        fill: none;
        transform-origin: center;
        animation: ringSpin 2s linear infinite;
      }
      @keyframes ringSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    </style>
    <circle id="Bullet" cx="24" cy="24" r="8"/>
    <circle id="Ring" cx="24" cy="24" r="20"/>
  </svg>
  

  修改完成后将整个SVG代码转成data URI，替换你原来::before伪元素的background-image地址即可，注意转码时将SVG内的双引号统一换成单引号，避免和url属性的引号冲突。

• 方案2：通过CSS变量实现动态样式控制
  如果需要在hover等交互场景下切换颜色/动画参数，可以在SVG内嵌的样式中使用CSS变量，再从页面CSS透传参数：

  1. 修改SVG内嵌样式，用var()定义属性值：

     <style>
       #Bullet {
         fill: var(--bullet-color, #999);
       }
       #Ring {
         stroke: var(--ring-color, #999);
         animation-duration: var(--ring-animation-speed, 2s);
       }
     </style>
     

  2. 在页面CSS中给伪元素的父节点设置变量：

     .your-target-element
       --bullet-color: orange
       --ring-color: blue
       &:hover
         --bullet-color: red
         --ring-color: green
         --ring-animation-speed: 1s
       &::before
         /* 原来的background-image、尺寸等配置不变 */
     

• 方案3：拆分图层用mask实现（适合交互复杂的场景）
  如果需要更灵活的控制，还可以把Bullet和Ring两个图层分别导出为单独的透明SVG，用两个伪元素分别作为Bullet和Ring的载体，通过mask属性结合背景色控制填充/描边颜色：

  .your-target-element
    position: relative
    &::before, &::after
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 48px
      height: 48px
    /* Bullet层 */
    &::before
      mask: url("data:image/svg+xml,...Bullet图层的SVG转码地址...") center / contain no-repeat
      background: orange
    /* Ring层 */
    &::after
      mask: url("data:image/svg+xml,...Ring图层的SVG转码地址...") center / contain no-repeat
      background: blue
  

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