Style svg?

[wragen22]

no ideas here?

[chrisburton]

@wragen22 Let me try to understand your problem. You want to add a different color on hover with a transition to your SVG?

[wragen22]

Yes, but using a class in my stylesheet

[Paulie_D]

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.

[chrisburton]

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.

[wragen22]

@Pauli_D The thing is I am importing background data svg, not image following Chris’ article here: https://css-tricks.com/using-svg/ and with the pen mentioned above It makes me think it is possible…
http://codepen.io/anon/pen/KoIrg

[Paulie_D]

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.

[wragen22]

@Paulie_D ok… :-/ I guess looking at Chris’ example in this post here, a bit down the page, makes me think i’m close…

https://css-tricks.com/workshop-notes-webstock-13/

[wragen22]

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.

.svg {
height: 500px;
width: 500px;
margin: auto;
fill: #e95b59;
&:hover {
fill: #4a4a4a;
}
}

My question now is , is this the best way? Am I missing something? Maybe I should use images and 2x for retina?

[Paulie_D]

>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.

[chrisburton]

You would be far better off using an SVG than a png for scalability and quality.

[Author]

Posts