Grow your CSS skills. Land your dream job.

Style svg?

  • # March 21, 2013 at 1:19 am

    Hi folks,
    I have seen several posts on how to style svg’s, but i’m not quite understanding for my situation.

    I have some svg images that is simply text. I am exploring avoiding web fonts because of rendering issues. I am trying to style these svg’s by dropping them into the html and styling in css, but this is not working. Can someone help me achieve this?

    Here is what i’m trying – In my HTML:

    svg

    CSS:

    .style {
    margin: 40px auto 40px;
    width: 200px;
    height: 100px;
    fill: #e05f5a;
    &:hover {
    @include transition(#4a4a4a .1s ease);
    fill: #4a4a4a;
    }

    # March 21, 2013 at 6:09 am

    Is it the transition not working or the color change?

    The transition won’t work I would assume because (I think) it should be

    transition: (fill .1s ease);

    No?

    # March 21, 2013 at 8:58 am

    I’m not sure about styling SVG’s, but @Paulie_D is right, and it should be the property in the transition, rather than the color. I’d also recommend taking the transition out of the hover, and putting it in `.style` so it has a smooth transition in and out of the hover state.

    # March 21, 2013 at 9:02 am

    It’s also odd that the containing div AND the svg have the same class…isn’t it?

    # March 21, 2013 at 9:27 am

    Yes, it is the color change I am having issues with. And for the containing div and the svg, I have been struggling with this as well. For some reason If I were to only leave one class, say for the containing div and nothing for the svg, nothing shows up. However, when I placed the class in both section the svg does show up properly…. :-/

    # March 21, 2013 at 11:01 am

    So if you try

    svg.style {
    fill: xxxxxxx;
    }

    ** note…no spaces **

    nothing happens to the fill?

    # March 21, 2013 at 12:30 pm

    so you recommend in my css file changing to svg.style { } ?

    # March 21, 2013 at 12:32 pm

    Dunno…does it work if you do?

    svg.style /* no space */

    will only select svg elements that have a class of style…the div element won’t be selected at all.

    svg .style /* with space */

    will select elements with a class of style **inside** svg elements…and that’s not what you want.

    # March 21, 2013 at 12:34 pm

    **
    `img.style`, since it’s an img element after all..

    # March 21, 2013 at 12:35 pm

    >** img.style, since it’s an img element after all..

    Oops…you are right!

    In that case…it won’t work at all….it’s just an image.

    You can only apply the fill to SVG elements.

    Doh!

    This…

    svg

    is not the same as

    # March 21, 2013 at 1:30 pm

    Interesting… so how might I be able to apply css properties to the svg? Hover ease ect?

    # March 21, 2013 at 1:34 pm

    You have to use the SVG element…not an image element.



    fill=”red” stroke=”blue” stroke-width=”5″ />

    http://codepen.io/Paulie-D/pen/nxrCK

    # March 21, 2013 at 1:36 pm

    @wragen22, you’d have to create an `` element, I believe. I could be wrong though, as I haven’t really used SVG much

    https://developer.mozilla.org/en-US/docs/SVG/Element

    err…beat me to it

    # March 21, 2013 at 2:38 pm

    So styling directly in the svg code? I can’t use external css?

    # March 21, 2013 at 3:34 pm

    I **think** if you give each element a class or an ID, you can do it with CSS &/or JS.

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".