0

I have a button which uses an SVG image.

How do I get the fill color to work? Currently it's not working, and is showing the default SVG color which is black. Note that I can't use jQuery, and prefer to keep it to pure CSS/HTML if possible. Is there any way to change the svg fill color with only CSS/HTML?

Note: Below, local SVG file replaced with sample.

.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">
showdev
  • 28,454
  • 37
  • 55
  • 73
janedoe
  • 907
  • 1
  • 13
  • 33
  • Possible duplicate of [img src SVG changing the fill color](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color) – showdev Dec 12 '17 at 01:11
  • 1
    The second part of [this answer](https://stackoverflow.com/questions/46045185/style-svg-loaded-to-html-as-content-tag-with-css/46045448#46045448) contains a hack by Lea Verdoux which may help you. – Kaiido Dec 12 '17 at 01:24

2 Answers2

2

You can't select the classes of the svg because it is being called as a static image. If you copy and paste your svg code directly into your HTML you can then use the classes within it with your css to apply different attributes like any other HTML element.

jeh
  • 577
  • 6
  • 18
0
<svg class="suchicon" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#FACC2E"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>

.suchicon:active {
    fill: #585858;
}

.suchicon:hover {
    fill: #585858;
}
hgg
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 01 '22 at 08:26