Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Transitions and Transforms Transitioning SVG Properties

Esen Espinosa
Esen Espinosa
5,064 Points
Posted by Esen Espinosa
Esen Espinosa
5,064 Points

So, the first thing we learn changing fill properties in svg's is that CSS overrides markup? Isn't that opposit of CSS?

I mean, specificity.

1 Answer

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi there, Esen Espinosa.

CSS can override SVG attributes just like it does with HTML attributes. SVG is a markup language for drawing graphics, which is done via inline attributes like fill, stroke, opacity, etc.

Those attributes are usually baked-in the SVG markup after exporting to SVG from a tool like Illustrator or Sketch. So in this case, it's OK to use CSS to change attributes on interaction states.

Hope this helps.