我在下面有此代码。
.icon {stroke-width: 0; stroke: currentColor; fill: currentColor;}
a {color: red}
a:hover {color: pink}
a:hover circle {fill: green !important; color: orange}
a:hover path {fill: blue !important}
<a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a>
...
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle fill="#ccc" cx="103.3" cy="12.2" r="12.1"/>
<path fill="#000" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path fill="#553" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle fill="f00" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>
这是带有更多彩色图层的SVG文件,我想为悬停时的每个图层设置不同的颜色。
我尝试删除HTML标记中的fill="..."
,尝试删除fill
属性,向CSS中设置为color
,fill
的SVG图层添加类/ id。
但是没有结果,我只能对没有fill
属性或HTML中没有fill="currentColor"
的所有图层更改一种颜色。
有什么想法吗?
谢谢。
答案 0 :(得分:0)
也许带有一些CSS变量。您不能定位use
内的元素,但可以依靠继承来传递某些值。
.icon {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
a {
color: red
}
a:hover {
color: pink;
--s1:green;
--s2:blue;
--p1:purple;
--p2:yellow;
}
<a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle style="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/>
<path style="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path style="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle style="fill:var(--s2,#f00)" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>
答案 1 :(得分:0)
(下面基于this marked-as-a-duplicate question发布的答案,而不是上述问题。)
我决定写我的SVG标记,好像 <use
... >
并没有在所使用的内容上添加阴影DOM障碍,于是就摆脱了这样的影子DOM:
private removeSignalMeterShadowRoots(): void {
const signalMeter = $('#signal-meter');
const markup = signalMeter.html();
const uses = $('use[href="#signal-meter"]');
uses.parent().html(markup);
}
... signal-meter
是id
的{{1}},我想重复使用多次,同时自由地应用CSS类来设置颜色和其他属性的样式,就像影子DOM不存在。
可以轻松地修改同一代码,以自动处理多个符号或所有符号。