在悬停或活动时更改svg颜色

Question

我有一个使用SVG图像的按钮。

如何使填充颜色起作用？目前它不起作用，并显示默认的SVG颜色，黑色。请注意，我不能使用jQuery，并且如果可能的话，更喜欢将它保持为纯CSS / HTML。有没有办法只用CSS / HTML来改变svg填充颜色？

注意：下面，本地SVG文件替换为样本。

.modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 30px;
  font-size: 28px;
  fill: #777;
}

.modal-close:focus {
  outline: 0;
}

.modal-close:hover {
  fill: #41b97c;
}

.modal-close:active {
  background-color: #41b97c;
  fill: white;
}

<input type="image" src="//dev.w3.org/SVG/tools/svgweb/samples/svg-files/duck.svg" class="modal-close pull-right" aria-label="Close">

Answer 1

您无法选择svg的类，因为它被称为静态图像。如果您将svg代码直接复制并粘贴到HTML中，则可以将其中的类与css一起使用，以应用与任何其他HTML元素不同的属性。