- This topic is empty.
March 24, 2013 at 12:03 pm #129527
no ideas here?March 24, 2013 at 12:44 pm #129530
@wragen22 Let me try to understand your problem. You want to add a different color on hover with a transition to your SVG?March 24, 2013 at 5:01 pm #129560
Yes, but using a class in my stylesheetMarch 25, 2013 at 7:40 am #129609
If the SVG is a **background** image then I don’t think you can change the ‘svg properties’ of the image with a hover state.
Hover states only apply to elements and the SVG (as far as I can see from your small amount of code) is not a page element.March 25, 2013 at 7:58 am #129611
So unless the SVG is being used as an element (or whatever you want to call it), I don’t see a way of doing this. I’m not even sure if the browser support is all that great either so that might be something to look into.March 25, 2013 at 6:04 pm #129687March 25, 2013 at 6:36 pm #129689
The issue is that the SVG (however it’s created) is a background image and that’s a property.
You can’t style a property only an element.
You can style the SVG if it’s element in the HTML….not in the CSS.
Oh….and that’s my Codepen…where the SVG is in the HTML.March 25, 2013 at 7:35 pm #129692
@Paulie_D ok… :-/ I guess looking at Chris’ example in this post here, a bit down the page, makes me think i’m close…March 25, 2013 at 10:29 pm #129704
Ok, I’ve been able to style following Chris Coyer’s example. https://css-tricks.com/using-svg/
First by importing the svg via php
Then in my optimized svg I gave it a class
Then in my css I did the following.
My question now is , is this the best way? Am I missing something? Maybe I should use images and 2x for retina?March 26, 2013 at 6:24 am #129732
>Maybe I should use images and 2x for retina?
SVG is a vector so it’s as big as it needs to be….that’s the whole point…it’s retina ready.
As for your method that will affect all elements with a class of .svg. **So, if there is only one SVG element with that class (or they are all the same)** IN YOUR HTML then it’s fine…I suppose.March 26, 2013 at 6:54 am #129712
You would be far better off using an SVG than a png for scalability and quality.
- The forum ‘CSS’ is closed to new topics and replies.