html - SVG 图标填充和描边不起作用

Question

我有一个简单的 SVG，默认情况下我想要红色，然后在悬停时将其更改为蓝色。但它似乎并没有奏效，请问为什么？

#svg-icon {
  fill: red;
  stroke: red;
}

#svg-icon:hover {
  cursor: pointer;
  fill: #005aa0;
  stroke: #005aa0;
}

<svg id="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="52" viewBox="0 0 62 52"> <image id="Vector_Smart_Object" data-name="Vector Smart Object" width="62" height="52" xlink:href="data:img/png;base64,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"> </image></svg>

Answer 1

如评论中所述，这是一张 base64 图片，而不是 SVG 图片，因此 fill 或 stroke 不会处理这个。但是，您可以尝试使用 mask-image 而不是 fill 和 stroke，然后更改 background-color悬停时类似于以下示例:

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

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;
}