Как установить простой CSS `: hover {` color, изменяющийся на `svg`, используемый в` founal: url () ` ⇐ Html

[Anonymous]

Я пытаюсь установить простой CSS: Hover {, изменяющийся на svg , используемый в фоне: url ()
Я пытаюсь использовать chrke = "currentColor" , но это не работает. Элегантное решение. < /p>
Я что-то пропустил?

Код: Выделить всё

.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>

Подробнее здесь: https://stackoverflow.com/questions/778 ... in-backgro