I found only one solution on StackOverflow, but user said it didn't work for them.

So, I embedded SVG image to html:

<object id="help-center" type="image/svg+xml" data="assets/help_center.svg">
</object>

I don't understand how to change color on hover in this case.

In this snippet / SVG is right inside HTML and color changes on hover successfully. How to do same thing?

I found only one solution on StackOverflow, but user said it didn't work for them.

So, I embedded SVG image to html:

<object id="help-center" type="image/svg+xml" data="assets/help_center.svg">
</object>

I don't understand how to change color on hover in this case.

In this snippet https://jsfiddle/annaolsh/3j8dmnn2/ SVG is right inside HTML and color changes on hover successfully. How to do same thing?

• javascript
• html
• css
• svg

Share Improve this question Follow asked Oct 1, 2017 at 2:12 Present practicePresent practice 60122 gold badges1616 silver badges2727 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

css styles for a svg object can be applied for an inline svg only. If you embed it using an external url with the HTML <object> tag, you can not use the <style> tag within the document or you can not use an external css file to modify the svg content.

If you embed an external svg file, you have to add the <style> tag within the svg file itself as below.

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

Otherwise get the source of svg file and inline it on the HTML file and then add your css styles directly. That's why your JSFiddle example worked and your provided code sample didn't work.

You can read more about how you can style svg objects here.
https://css-tricks./using-svg/#article-header-id-11