锚 (<a>) 标记未检测和更改填充颜色答案

【问题标题】：Anchor (<a>) tag not detecting and changing fill color锚 (<a>) 标记未检测和更改填充颜色
【发布时间】：2021-07-16 21:58:49
【问题描述】：

我曾尝试环顾谷歌和堆栈溢出以了解我的问题发生的原因，不幸的是，这些方法都不起作用。我尝试将!important 元素添加到css，但这也不起作用。我以为这是我对图标的定位，但我尝试了不同的定位，但仍然不起作用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
   code is here and linked to css 
</head>

<body>
    <div class="pageIcons">

        <div class="facebook">
            <a href="https://www.facebook.com/jake.stecklow">
                <img src="facebook.svg">
            </a>
        </div>


        <div class="instagram">
            <a href="https://www.instagram.com/jstecklow08/">
                <img src="instagram.svg">
            </a>
        </div>


        <div class="twitter">
            <a href="https://twitter.com/JakeStecklow">
                <img src="twitter.svg">
            </a>
        </div>
    </div>

</body>

</html>

这是我的 pageIcons 和 Anchor 标签的 CSS。



.pageIcons {
    position: fixed;
    z-index: 2;
    margin-left: 97vw;
    margin-top: 40vh;
    height: 1.5vh;
    width: 1.5vw;
    line-height: 30px;
}

a {
    fill: #c2c2c2;
}

a:hover {
    fill: white;
}

请记住，我已尝试填充 pageIcons 而不是锚 css。

非常感谢您的帮助。

【问题讨论】：

fill 应该应用于 svg，而不是锚标签
所以，a:hover svg { fill: ... } 和 a svg { fill: ... } 应该可以工作。
@RenevanderLende 是否应将img 标签替换为svg 标签？
可能。目前，您的 SVG 被视为图像（阅读：jpg、png），但您想更改该图像的内容（其颜色）。为此，img 必须是svg。这将要求您学习如何将 SVG 合并到您的文档中。没那么难，但是当你有很多小 SVG 时有点麻烦。大多数使用 SVG 图标的页面在主文档中都有这些图标，因此它们可以访问属性。

标签： html css web

【解决方案1】：

CSS 中的 fill 属性用于填充 SVG 形状的颜色。将 img 标签更改为 svg，然后对其应用颜色

【讨论】：

它们只是变得不可见，改变了不透明度但仍然没有运气。
您好 Rozhan，您的回答实际上是“评论”，需要直接添加到问题下方。将其发布为“答案”很快就会让你被否决……没什么大不了的。
SVG 图像可以使用标签直接写入 HTML 文档。为此，请在 VS 代码或首选 IDE 中打开 SVG 图像，复制代码并将其粘贴到 HTML 文档中的元素中

【解决方案2】：

我在 html 文件本身中添加了 svg，而不是使用 img 标记。所以不是像<img src="name.svg">那样链接文件，我添加了<svg ......> <path .....>等。感谢大家的帮助！

【讨论】：