Styling SVG Fill Color of an input element

Is it possible to change the Fill Color of the SVG content when the input element below is in :hover state without changing the source svg image?

<input type="image" src="images/toolbar/check.svg" />

The solution that ultimately worked is based on Erik's suggestion:

First the input element needs to be changed into a button element with inline svg content:

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 95.453 100" enable-background="new 0 0 95.453 100" xml:space="preserve"><g><g><polygon points="94.587,27.48 31.657,86.15 31.217,85.68 18.847,72.41 0.566,52.81 14.106,40.19 32.387,59.79 81.776,13.74"/></g></g>
</svg>
</button>

Then we can style the svg fill color using ordinary CSS:

button:hover svg {
    fill: red;
}

Answers


Why not use inline svg for this instead, and then add some CSS to style the fill colors. That should be more efficient.


Need Your Help

Are uninitialised serial port attributes given default values as they are when using the default constructor?

c# .net constructor serial-port default-constructor

If creating a serial port with the default constructor or parameterless constructor, the port is given default values. From the documentation:

Updating a JSON with AJAX Jquery

javascript jquery json ajax

It's been hours I'm searching for a, I guess, simple answer.