如何使svg颜色不同[重复]
我有一个图标svg喜欢：
<svg width="90" height="90">
<image xlink:href="{{asset('images/menu-icons/some-icon.svg')}}"/>
</svg>
它显示很好，但我想在某些情况下改变颜色（如悬停或选择）
我用过：
.menu-item svg{
fill: red!IMPORTANT;
}
它不会改变颜色。任何帮助都将不胜感激。
共有1个答案
我想你在这里有你的答案。你可能是
- 将svg用作图像，在这种情况下不能更改颜色
- 那个！重要的css关键字应与属性隔开
-
对于一个项目，我们一直在使用SVG图像。我试图给它们上色，但没有成功，这是SVG： 我目前正在使用这个SVG作为一个< code>div的背景，我正在努力改变它的颜色。 以下是我尝试过的： .某些家长. cls-1{填写：#0080FF！重要；} 和 我还试图删除SVG的，但这没有效果。 这是使用SVG作为我的潜水背景的CSS：
-
我的问题和其他问题之间的区别在于，其他问题使用或来解决。但我希望我的问题只能用html来解决。 我在这个问题中的主要目标是获得一段html代码来使用文件并将其更改为我自己喜欢的颜色！ 我有< code>home.svg文件。我使用这个文件如下，我试图改变它的颜色。 < code>svg的默认颜色是黑色，但我想把它改成白色或其他颜色！ 我如何解决这个问题？
-
在这里，我尝试更改图像svg颜色。 是否可以更改angular 5中按钮中svg图像的颜色
-
我在我的网站上使用svg图标，想把它们的颜色改成红色（它们都是黑色的）。 我试着在img标签上使用css-fill属性，但它不起作用。然后我遇到了对象attr，并尝试使用svg图标，如下所示： 在这里，在对象上应用填充属性什么也不做。关于如何在不使用jQuery的情况下更改svg元素的填充属性的任何想法 JSFIDLE
-
我有一个SVG元素，它包含两个尺寸和位置完全相同的子元素。两者唯一的区别是它们的颜色：第一个是红色，第二个是绿色。我注意到，即使绿色的圆圈在红色的上面，你仍然可以看到在圆圈的边缘有一点颜色偏移。我有什么办法可以避免这种颜色的变化吗？ 下面是一张屏幕截图，显示了有红圈和没有红圈的情况： 这里还有我用来复制这个的小提琴。 null 欢迎任何不同的想法。
-
问题内容： 我想使用这项技术并更改svg颜色，但到目前为止我还没有做到这一点。我把它放在css中，但是无论如何我的图像总是黑色的。我的代码： 问题答案： 您不能以这种方式更改图像的颜色。如果将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改其显示方式。 如果你想改变你的SVG图像，你必须用它来装载，或使用在线。 如果要使用页面中的技术，则需要Modernizr库，您可以在其中