6

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%}
Sled
  • 18,541
  • 27
  • 119
  • 168
user3389584
  • 135
  • 2
  • 2
  • 7
  • 2
    Did you look at http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg ? – Jason Aller Mar 09 '14 at 23:03
  • 1
    It's easy if you can *embed* the SVG in the HTML file. Then you could reference the `#Layer_1` ID and change the style of the child elements. – helderdarocha Mar 09 '14 at 23:05
  • Thanks, guys! I managed to get it figured out! http://codepen.io/anon/pen/fDuKi @helderdarocha, if you set your response as an answer, I will mark it as correct! Thanks again! – user3389584 Mar 09 '14 at 23:32
  • I can do that, but please edit your question including the code of the problem you were asking about (the codepen link is not enough) so it can be a reference for others who might have a similar problem (and also avoid its deletion). – helderdarocha Mar 09 '14 at 23:40

1 Answers1

10

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 }
helderdarocha
  • 23,209
  • 4
  • 50
  • 65