Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Targeting SVG icons with CSS not working in Webkit

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #183300
    mattron
    Participant

    I’m working on a project that uses some SVG icons that I’d like to be able to style with css for different scenarios and hover states, but what I have just doesn’t seem to work in Webkit, though it’s working as expected in Firefox:

    http://codepen.io/poopsplat/pen/ycaod

    I’m using these SVGs in the way that Chris outlines in his Icon System with SVG Sprites article, which is by including a defs file on the page and then placing <svg> elements on the page that reference specific <symbol> elements by id using the <use> tag. I’m also utilizing Grunt-svgstore to automate the build of the SVG defs file.

    Chris’s example (http://codepen.io/chriscoyier/pen/EBHlD) works great in Webkit, even if you begin to nest the icons into containers and target them that way, so that’s not the issue. In that particular example Chris uses <g> elements and targets those, while the automated output file form Grunt-svgstore wraps the individual icons in <symbol> elements with ids that are referenced in the HTML, but I tried formatting my SVG defs file in that way to test if that was the issue, and it’s not.

    I’m at a loss for what is different about my working example and something like Chris’s example — anyone have any ideas as to why targeting these SVG icons is failing in Webkit?

    #183347
    Paulie_D
    Member

    You cannot apply CSS to the internals of a <use> element AFAIK.

    You can apply classes to the <use> elements though for overall styling.

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

    #183388
    mattron
    Participant

    Thanks for looking into this Paulie_D — I played around with your pen and it turns out you can apply CSS to the internals of a <use> element, but that ended up not being my issue.

    I found out that The svg’s I was saving via Adobe Illustrator were including presentational markup like stroke="#FFFFFF" and fill="#FFFFFF" and these were for whatever reason preventing the styles applied to stroke and fill in my CSS from being applied. Since I am using Grunt.js to automate the concatenation and cleaning of my SVG files I opted to re-save each of my icons with no colors applied to the strokes or fills, and now I’m able to style them with CSS as expected.

    Thanks for your help getting me on the right track though!

    #183389
    Paulie_D
    Member

    it turns out you can apply CSS to the internals of a <use> element,

    You can!?

    Please demo because I tried and couldn’t get to to work and was banging my head against it for ages.

    #183390
    mattron
    Participant

    Unless I’m not understanding what you are saying properly…
    Here’s a fork of your example with the styles applied to the containing <svg>, and also with one of the icons wrapped in a container and the styles applied via the container:

    http://codepen.io/poopsplat/pen/DkeuA

    #183398
    Paulie_D
    Member

    No…that’s doing the same thing as I was.

    What I meant was you can’t target a particular path (or whatever) inside a <use> with CSS like you could with a standard svg.

    Yes, you can change a whole use but not the internal paths etc that make up the def or symbol….unless someone can show me different.

    #183434
    burr
    Participant

    You can if that path has an ID or Class.

    Problem is that if you specify more than that individual selector in the CSS it won’t work.

    E.g (Paulie pen)

    .arrow {
        fill: aqua;
    }

    Will work but

    .someParent .arrow {
        fill: aqua;
    }

    Won’t.

    I suppose that sort of defeats that purpose of using a sprite if you can’t style each one individually.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.