Question

这是一个相当复杂的问题，如果我的解释让您感到困惑，请告诉我。我有一个working demo，可以帮助您进一步了解情况。我将在要点中解释：

我关注Chris Coyier's method for SVG sprites。
我有三列显示相同的SVG图标。
- 第一栏是无主题的。
- 第二列的主题为浅色背景。
- 第三栏的主题为深色背景。
主题应用于基于SVG类的图标，如下所示： <svg class="icon theme-light"><use xlink:href="#shape-search" /></svg>

现在我遇到了问题。搜索图标有两部分：放大镜和镜头（类.lense）。镜头填充在精灵文件中设置为fill="rgba(255,255,255,0.0)"。这样做是为了在没有应用主题时不出现镜头。

我希望镜头在目标时出现。我认为.theme-light .lense {fill: rgba(0,255,0,1.0);}会起作用，但事实并非如此。我可以做.lense {fill: rgba(0,255,0,1.0);}，但是对于我不想要的所有三个主题，镜头的样式都是一样的。关于我可以做什么来根据SVG的特定部分定位它的任何建议？

以下是我可以使用的所有资源，以便您更好地了解问题：

My working demo
My SVG sprite

搜索图标的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>

尝试根据嵌套在

0 个答案: