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

SVG not changing colors when testing in CodePen despite following other's working example

I tried following this example: http://codepen.io/anon/pen/ZKORrw (posted by Mat Helme). However, my version isn't working.

My test: https://codepen.io/jrothra/pen/bWeKML

I tried entering every ID I could find in the SVG code, yet none worked. Where did I go wrong?

Notes: I use Inkscape to create SVGs, but not sure if that makes a difference.

4 Answers

Hi John

Instead of having on the path

style="fill:#ffffff;fill-opacity:1"

I used the below and the hover works

fill="#ffffff" fill-opacity="1"

Huh? Having what on the path? Used the below where?

Okay, figured out what you meant: remove the inline styling, placing it in the stylesheet instead. I did that and now it works. Thank you! I completely overlooked this (the inline overrode the external css).

https://codepen.io/jrothra/pen/bWeKML

Found an interesting effect, at least interesting to me. However, it's a different issue so I'll start a new thread on that.

That thread: https://teamtreehouse.com/community/svg-transition-effects-one-id-sooner-than-the-other-weird-or-am-i-forgetting-something