Question

我已经嵌入了我的.svg文件（无法链接它，因为附加文件不会将.svg＆＃39; s）作为背景图像，并且不打算更改该实现。我给了它一种颜色，现在我试图在悬停时更改它，然后点击之后（但是/应该是同样的实现：hover）。

HTML：

<li class="twitter"><a href="https://twitter.com/CantTellYa">Twitter</a></li>

CSS：

.twitter a {
            @extend .icon;
            background-image: url(/public/images/TwitterIcon.svg);
}

Twitter SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path fill="#027FAD"  d="M512,97.2c-18.8,8.4-39.1,14-60.3,16.5c21.7-13,38.3-33.6,46.2-58.1c-20.3,12-42.8,20.8-66.7,25.5
    C412,60.7,384.7,48,354.5,48c-58,0-105,47-105,105c0,8.2,0.9,16.2,2.7,23.9c-87.3-4.4-164.7-46.2-216.5-109.8
    c-9,15.5-14.2,33.6-14.2,52.8c0,36.4,18.5,68.6,46.7,87.4c-17.2-0.5-33.4-5.3-47.6-13.1c0,0.4,0,0.9,0,1.3
    c0,50.9,36.2,93.3,84.3,103c-8.8,2.4-18.1,3.7-27.7,3.7c-6.8,0-13.3-0.7-19.8-1.9c13.4,41.7,52.2,72.1,98.1,72.9
    c-35.9,28.2-81.2,45-130.5,45c-8.5,0-16.8-0.5-25.1-1.5C46.5,446.7,101.7,464,161,464c193.2,0,298.9-160.1,298.9-298.9
    c0-4.6-0.1-9.1-0.3-13.6C480.1,136.8,497.9,118.3,512,97.2z"/>
</svg>

我尝试的事情：

.twitter svg:hover {
            fill: #FFF;
        }

.twitter svg path:hover {
            fill: #FFF;
        } 

.facebook a {
            @extend .icon;
            background-image: url(/public/images/devdot/FacebookIcon.svg);

            /* svg:hover {
                fill: #FFF;
            } */
        }

我也尝试使用相同的实现而不是svg:hover作为a:hover - 还没有任何效果。任何帮助将不胜感激！

在悬停时更改SVG颜色

0 个答案: