Question

当屏幕小于992像素时，我需要将徽标颜色更改为黑色，而不是白色。我认为，比显示和隐藏2个不同的图像要容易得多。

我尝试在.svg文件样式标记中添加它，但它似乎只是使用白色填充，并且不会受到屏幕调整大小的影响。

<style type="text/css">     
.logo-color{fill:#FFFFFF;}

    @media (min-width: 992px) {
      .logo-color {
        fill:#000000;
      }
    }
</style>
<path class="logo-color"...etc..

感谢您的帮助。

编辑：

如果它有所作为，我应该声明我用它来调用它：

<img src="css/img/logo.svg" alt="Logo" width="150" style="width:150px;">

Answer 1

在html中嵌入svg代码，而不是将其添加为图像，它将起作用

Answer 2

我想有不同的方法，但这里有一个：

根据@media查询，当屏幕宽度缩小至小于992px时，徽标将从白色背景上的黑色图像变为黑色背景上的白色图像。

svg {
width: 414px;
height: 96px;
fill: rgb(0,0,0);
background-color: rgb(255,255,255);
}

@media only screen and (max-width:992px) {
svg {
fill: rgb(255,255,255);
background-color: rgb(0,0,0);
}
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413.1 96">
<path d="M0.7,81.8L0.7,81.8v-0.9c0.2-3.2,1.4-5,3.5-5.5h15.6c2.2,0.4,3.4,2.6,3.5,6.4h-2.8c-0.1-2.4-0.8-3.5-2.1-3.5
    H5.7c-1.2,0-1.9,1.1-2.1,3.2c0.2,1.9,0.9,2.8,2.1,2.8h14.2c2.1,0.5,3.3,2.2,3.5,5.3v0.7c-0.2,3.3-1.4,5.2-3.5,5.7H4.2
    c-2.2-0.4-3.4-2.6-3.5-6.4h2.8c0.1,2.4,0.8,3.5,2.1,3.5h12.7c1.2,0,1.9-1.1,2.1-3.2c-0.2-1.9-0.9-2.8-2.1-2.8H4.2
    C2.1,86.6,1,84.8,0.7,81.8L0.7,81.8z M81.2,95.9h-2.8V78.2h-8.5v-2.8h19.8v2.8h-8.5V95.9L81.2,95.9z M157.5,75.4v17
    c-0.5,2.4-2.8,3.5-7.1,3.5h-7.1c-4.3,0-6.6-1.2-7.1-3.5v-17h2.8V91c0,1.4,1.4,2.1,4.3,2.1h7.1c2.8,0,4.2-0.7,4.2-2.1V75.4H157.5
    L157.5,75.4z M206.9,78.2v14.9h13.4c1.4,0,2.1-1.4,2.1-4.3v-6.4c0-2.8-0.7-4.2-2.1-4.2H206.9L206.9,78.2z M204,95.9V75.4h17.7
    c2.4,0.5,3.5,2.8,3.5,7.1v6.4c0,4.3-1.2,6.6-3.5,7.1L204,95.9L204,95.9z M274.6,95.9h-2.8V75.4h2.8V95.9L274.6,95.9z M326.1,78.2
    c-1.4,0-2.1,1.4-2.1,4.2v6.4c0,2.8,0.7,4.3,2.1,4.3h12.7c1.4,0,2.1-1.4,2.1-4.3v-6.4c0-2.8-0.7-4.2-2.1-4.2H326.1L326.1,78.2z
     M324.7,95.9c-2.4-0.5-3.5-2.8-3.5-7.1v-6.4c0-4.2,1.2-6.6,3.5-7.1h15.6c2.4,0.5,3.5,2.8,3.5,7.1v6.4c0,4.3-1.2,6.6-3.5,7.1H324.7
    L324.7,95.9z M390.4,81.8L390.4,81.8v-0.9c0.2-3.2,1.4-5,3.5-5.5h15.6c2.2,0.4,3.4,2.6,3.5,6.4h-2.8c-0.1-2.4-0.8-3.5-2.1-3.5h-12.7
    c-1.2,0-1.9,1.1-2.1,3.2c0.2,1.9,0.9,2.8,2.1,2.8h14.2c2.1,0.5,3.3,2.2,3.5,5.3v0.7c-0.2,3.3-1.4,5.2-3.5,5.7H394
    c-2.2-0.4-3.4-2.6-3.5-6.4h2.8c0.1,2.4,0.8,3.5,2.1,3.5H408c1.2,0,1.9-1.1,2.1-3.2c-0.2-1.9-0.9-2.8-2.1-2.8h-14.2
    C391.8,86.6,390.6,84.8,390.4,81.8z" />
<path d="M20.5,24.1h43.2c26.7,0,26.6,36.6,0,36.6H1.2v-11h59.6c9.8,0,9.7-13.8,1-13.8H19.9C-6.6,35.9-6.6,0,19.9,0
    c57.7,0,114.6,0,172.2,0c6,0,10.3,0.9,13,2.8c2.7,1.8,4.1,4.8,4.1,9V26c0,4.1-1.3,7.2-4.1,9.1c-2.7,1.9-7,2.8-13,2.8h-9.9l34.9,22.9
    h-25.2l-44.5-33.3h36.9c3,0,5.1-0.3,6.3-1.1c1.1-0.7,1.7-2,1.7-3.8v-7.3c0-1.8-0.5-3-1.7-3.7c-1.1-0.7-3.2-1.1-6.3-1.1
    c-21.1,0-40.7,0.8-61.9,0.8v49.5h-17.6V11.3C76.7,11.3,49,11,20.7,11C13.7,11,13.8,24.1,20.5,24.1L20.5,24.1z M354,23.9l0.1-8
    c0.1-7.2,5.5-5.3,10.7-5.6h46.8V0h-50.9h-6.9c-6,0-10.4,1-13.1,2.8c-2.7,1.9-4.1,4.9-4.1,9.1v11.6v14.2v11.6c0,4.1,1.4,7.2,4.1,9.1
    c2.7,1.9,7,2.8,13.1,2.8l14-0.4h44.6V49.3l-51.6,1.2c-4.9-0.1-6.4-0.1-6.6-5.1c-0.1-1.5-0.2-9.7-0.2-11.2h57.3V23.9H354L354,23.9z
     M306.3,10.6c-19,0-37.9-0.1-56.8-0.1V0h64.6c6,0,10.4,1,13.1,2.8c2.7,1.9,4.1,4.9,4.1,9.1v13.5c0,4.1-1.4,7.1-4.1,9
    s-7,2.8-13.1,2.8h-47.3v23.6h-17.3V26.5c19,0,37.8,0.2,56.8,0.2c3,0,5.1-0.4,6.2-1.1s1.7-2,1.7-3.7v-6.5c0-1.8-0.6-3-1.7-3.7
    C311.4,10.9,309.3,10.6,306.3,10.6L306.3,10.6z M224,60.7V0h17.6v60.7H224z" />
</svg>

如何通过媒体查询更改SVG颜色？

2 个答案: