Can I use CSS with SVG or I can only use partially?
I read somewhere that CSS and SVG don’t go together, but CSS clearly works with SVG. Look at this example:
This works, but if I change the CSS element to this:
Color would NOT change on hover. What is going on? It partially works?
What is going on? It partially works?
The inline style (added via the
style attribute) is more specific which means that it is overriding the color that is added on hover. Inline styles added to an element will always overwrite any styles in the CSS (unless you use
!important, which should always be avoided).
See this MDN article on CSS specificity.
If you set the initial color using the selector
rect, it would work as expected because
rect:hover has a higher specificity than
rect which means that it will be overridden.