no ideas here?
@wragen22 Let me try to understand your problem. You want to add a different color on hover with a transition to your SVG?
Yes, but using a class in my stylesheet
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.
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.
@Pauli_D The thing is I am importing background data svg, not image following Chris’ article here: http://css-tricks.com/using-svg/ and with the pen mentioned above It makes me think it is possible…
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.
@paulie_d ok… :-/ I guess looking at Chris’ example in this post here, a bit down the page, makes me think i’m close…
Ok, I’ve been able to style following Chris Coyer’s example. http://css-tricks.com/using-svg/
First by importing the svg via php
< ?php include("svgs/text.svg"); ?>
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?
>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.
You would be far better off using an SVG than a png for scalability and quality.
You must be logged in to reply to this topic.