Give help. Get help.

  • # March 24, 2013 at 12:03 pm

    no ideas here?

    # March 24, 2013 at 12:44 pm

    @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

    Yes, but using a class in my stylesheet

    # March 25, 2013 at 7:40 am

    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

    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

    @Pauli_D The thing is I am importing background data svg, not image following Chris’ article here: and with the pen mentioned above It makes me think it is possible…

    # March 25, 2013 at 6:36 pm

    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

    @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

    Ok, I’ve been able to style following Chris Coyer’s example.

    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.

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

    # March 26, 2013 at 6:24 am

    >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

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

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.