Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如评论中所述，这是一张 base64 图片而不是 SVG 图片，因此(await document.GetSyntaxRootAsync()).InsertNodesBefore(declaration, listOfOneNode)或fill无法使用这个。但是，您可以尝试代替stroke和fill，使用stroke，然后在悬停时更改mask-image，例如以下示例：

background-color

<强> CSS

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

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

1 个答案: