CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
In fact, you can: http://codepen.io/anon/pen/KoIrg
This reply has been reported for inappropriate content.
@Paulie_D, no hover though? I can’t seem to figure it out, I’ve been trying on both of your pens…I have no experience with SVG though
Oh, I see..I was trying to use SCSS, force of habit for CodePen these days.
Still unable to get this to work…
I’m currently importing the svg code as background data in css
and for my code, I am using
with the codefish code in place of the “[data]”
With my actual svg data before mobilefish
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 must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed