Html SVG图标填充和笔划不工作

我有一个简单的SVG，默认情况下我想要红色，然后在悬停时，将其更改为蓝色。但它似乎不起作用，为什么

#svg图标{
填充物：红色；
笔画：红色；
}
#svg图标：悬停{
光标：指针；
填充：#005aa0；
行程：#005aa0；
}

---

如评论中所述，这是一个base64图像，而不是一个SVG图像，因此

填充
或
笔划
不适用于此。但是，您可以尝试使用
蒙版图像
，而不是
填充
和
笔划
，然后在悬停时更改
背景色
，如以下示例所示：

<a href="javascript:void(0)">
        <div class="img-smiley">
        </div>
    </a>

这是base64图像，不是svg图像。填充和笔划对此不起作用。遗憾的是，仅仅将图像放在svg中并不能使其基于矢量。expandin on@Maharkus回答：您需要在dom中具有路径/笔划/诸如此类的内容，才能通过css将它们作为目标<代码>[…]
类似于此，而不是编码图像。
.img-smiley 
{
  background-color: red;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");

    height:80px;
    width:80px;
    display:block;  
}

.img-smiley:hover{
    background:green;
}