Css 尝试根据SVG嵌套的类对其进行主题化

这是一个相当复杂的问题，如果我的解释让你感到困惑，请告诉我。我有一份报告，这将帮助你进一步了解情况。我将用要点来解释：

• 我跟在后面
• 我有三列显示相同的SVG图标。
  • 第一列没有主题
  • 第二栏有一个轻背景的主题
  • 第三栏的主题是深色背景
• 主题基于SVG类应用于图标，如下所示：

这就是我遇到问题的地方。搜索图标有两部分：放大镜和透镜（class

.lense

）。透镜填充在sprite文件中设置为

fill=“rgba（255255,0.0）”

。这样做是为了在没有应用主题时透镜不会出现

我希望透镜在对准目标时出现。我原以为

.theme light.lense{fill:rgba（0255,0,1.0）；}

可以工作，但实际上不行。我可以做

.lense{fill:rgba（0255,0,1.0）；}

但是，对于我不想要的所有三个主题，lense的样式都是一样的。根据SVG所属的主题类，我可以针对SVG的特定部分做些什么

以下是我提供的所有资源，可供您查看，以更好地了解问题：

• 搜索图标的SVG代码：

  <symbol id="shape-search" viewBox="0 0 32 32">
      <circle id="lense" fill="rgba(255,255,255,0.0)" cx="12" cy="12" r="9"/>
      <path d="M32,29.2L21.8,18.9c1.4-2,2.2-4.4,2.2-6.9c0-6.6-5.4-12-12-12S0,5.4,0,12c0,6.6,5.4,12,12,12c2.6,0,5-0.8,6.9-2.2L29.2,32L32,29.2z M4,12c0-4.4,3.6-8,8-8s8,3.6,8,8c0,4.4-3.6,8-8,8S4,16.4,4,12z"/>
  </symbol>
  

---

您是否有可能将演示缩小到可管理的大小……没有真正的理由让每个svg都出现在那里。毕竟，你只追求一个概念。据我所知，你不能“进入”一个

使用
元素，尽管如此。@Paulie\u D好的，链接已经更新。正如我提到的，我的理解是，你不能使用CSS规则来选择一个元素的伪子元素。这个问题有很多信息-