So setzen Sie ein einfaches CSS `: hover {` Farbe, die auf einem in "Hintergrund verwendeten" Svg` verwendet wird: url ( ⇐ CSS

[Anonymous]

Ich versuche, ein einfaches CSS zu setzen: Hover { Farbe, die auf einem im Hintergrund verwendeten SVG verwendet wird: url ()
Ich versuche, Stroke = "CurrentColor" zu verwenden. Elegante Lösung. < /p>
Habe ich etwas verpasst?

Code: Select all

.sz30 {
--siz   : 30px;
display : inline-block;
width   : var(--siz);
height  : var(--siz);
margin  : 1rem;
background-size : cover;
cursor          : pointer;
caret-color     : transparent;
}

.test_ccGreen {
color:green;
background : url('data:image/svg+xml,
');
}
.test_ccBlue {
color:blue;
background : url('data:image/svg+xml,%3Cstyle%3Epath{stroke:currentColor;}%3C/style%3E');
}
.test_ccGreen:hover, .test_ccBlue:hover { color:red; }

.test_duplicateSVG {
background : url('data:image/svg+xml,');
}

.test_duplicateSVG:hover {
background : url('data:image/svg+xml,');
}< /code>