How to Change Stroke Color in SVG Image on Hover Event? [duplicate]

Question

I've been searching through the site for an answer, and it seems no one has really received a definitive answer for this specific question.

I'm looking to change the color of the stroke on an SVG icon that I made when it is hovered over.

Here is my current code:

<object data="price.svg" type="image/svg+xml" class="icon">
    <a href="price.svg" />
</object>

CSS:

.icon {width:100%}

Answer 1

You can't change the properties of a foreign object that way. But it's easy if you can embed the SVG in the HTML file. Then you could reference the IDs of your SVG and change the style of the child elements.

Replace

<object data="price.svg" ...> ... </object>

with the contents of your SVG file:

<svg ...><path id="styled-element" ...></svg>

Now you can apply a style to it:

#styled-element:hover { stroke:red }