如何使用媒体查询更改我的SVG颜色？

当屏幕小于992px时，我需要将我的标志颜色更改为黑色，而不是白色。我想，比展示和隐藏两幅不同的图像要容易得多。如何使用媒体查询更改我的SVG颜色？

我试图在.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;">

来源

2016-11-17 KeepCool

请提供原始SVG。 – hungerstar

它应该实际上工作。 [自己尝试]（https://jsfiddle.net/gmj23ve2/）。 – insertusernamehere

你的意思是'最大宽度'不是'最小宽度'，如果你想让它在992px以下生效 – MichaelB

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

按照该@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>

来源

2016-11-17 20:33:42 Rounin

这工作！谢谢。对于将来有同样问题的任何人，我将简单的svg代码直接放在html中（没有所有的xml东西和样式），然后将css放在head或css文件中。我还将背景颜色设置为“无”，以保持透明度。感谢Rounin！ – KeepCool

如果将SVG用作图像，即通过标记，则这不起作用。 –

注意：当提到_“内联SVG”_时，这意味着SVG应该嵌入到html中。 – hungerstar

嵌入SVG代码的HTML，而不是将其添加为形象，也将努力

来源

2016-11-17 20:19:50 Vel

谢谢。我如何将其嵌入到我的html中，然后将其作为图像插入。不知道我明白。 – KeepCool

@KeepCool你不能。如果您想要设置SVG的内容，则必须内联。 – Turnip

如何使用媒体查询更改我的SVG颜色？

回答

相关问题