如何更改svg图像的颜色

Question

有没有办法在不使用像font-awesome这样的第三方索引的情况下更改SVG图像的颜色？

我在下面有一个简单的菜单按钮，我希望在悬停时更改它的颜色而不必调用新图像。

这可能吗？

jsfiddle

#mobile-button {
	background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
    background-size: 30px 30px;
	float: right;
	width: 30px;
	height: 30px;
	margin-right: 5%;
	margin-top: 15px;
	cursor: pointer;
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
	/*background-image: url("");*/
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}

<div id="mobile-button"></div>

Answer 1

如果您可以从svg文件生成html svg元素，则可以使用颜色，并填充css属性。

h1{
  color: red;
}

svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  vertical-align: bottom;
}

<h1>
  <svg viewBox="0 0 32 32">
    <path class="path1" d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
  </svg>
  Call me
</h1>

如果你使用div或图像，你可以做的最多就是使用filters来改变元素的颜色。插入带有颜色的图像并使用灰度/色调旋转来更改其颜色

img{
  width: 100px;
  height: 100px;
  filter: hue-rotate(90deg)
  
}

<img src='https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg'>