Forums

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

Home › Forums › CSS › SVG styling problems with use and xlink

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 20, 2015 at 3:40 pm #193746
    Brian Meyer
    Participant

    Hi all,

    In Chrome (not FF, Safari), I’m unable to style an externally linked (xlink:href) SVG’s sub-elements by class/ID/element reference.

    Styles inline the demo.svg#my-icon do work.

    HTML:

    <svg class=“my-svg"><use xlink:href=“demo.svg#my-icon”  /></svg>

    demo.svg:

    <svg xmlns="http://www.w3.org/2000/svg” xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id=“my-icon" viewBox="0 0 21 21">
       <title>Mobile Navigation Button</title>
       <path class=“fml” fill=“#BADA55" d=“M27.493....”/>
    </symbol>
</svg>

    CSS:

    .my-svg { fill: pink; } /* will work <em>/
#my-icon { fill: brown; } /</em> won’t work in Chrome <em>/
.fml { fill: green; } /</em> won’t work in Chrome */

    I’ve posted a more detailed demo here:
    http://monopine.com/svg-demo/

    January 20, 2015 at 7:54 pm #193755
    Chris Coyier
    Keymaster

    See how the <path> has a fill attribute? That’ll mean that the only way to change the fill color on it is if you target it directly and change it. No other fill color can cascade to it. But any CSS will beat it. The .fml selector should work, and if it doesn’t, something else is wrong.

    January 20, 2015 at 7:56 pm #193757
    Chris Coyier
    Keymaster

    And don’t apply styling to a <symbol> I’d say is a good rule of thumb. They have ID’s just so you can reference them later in a <use>, but the symbol essentially turns into another <svg>. Your best bet for styling is to style the shape elements themselves, or the <svg> element itself where you use them.

    January 20, 2015 at 8:25 pm #193760
    Brian Meyer
    Participant

    Thanks for the feedback Chris, buutttt.

    I’ve tried all of your recommended permutations.

    I pulled the inline styles out of the demo.svg file so you have something like:

    &lt;path class=“fml” d=“M27.493….”/&gt;

    I’ve updated my demo to reflect:
    – no inline styles
    – no targeting of the symbol
    – no targets via the svg.class found in the HTML snippet.
    – only paths are targeted via their class in CSS.

    When that’s done, Chrome falls back to filling the SVG paths as black. FF and Safari render as normal.

    The inability to style the <path> via its .fml class only arrises when using a linked file i.e. demo.svg#my-icon (vs a set of defs the page: i.e. #my-icon)

    notes:
    – the demo.svg file is in the same web-directory, as there are cross site linking restrictions.
    – Doctype is HTML5: <!DOCTYPE html>

    related but also using in page references like #my-symbol vs demo.svg#my-symbol
    http://codepen.io/FWeinb/blog/quick-tip-svg-use-style-two-colors

    November 10, 2015 at 7:16 am #234763
    Alessio Carone
    Participant

    I am having the same problem. is there a solution to this? I use SVG with multiple colors, and referencing with css would be great to reduce the size of the file when colors are the same, instead of hardcode inline in the vectors.

    January 21, 2016 at 3:34 pm #237141
    Guyom
    Participant

    Glad to read Brian Meyer’s SVG bugz page. I am not alone with this bug \o/
    That said, I am still stuck. Is anyone found a solution?

    March 9, 2016 at 6:51 am #238866
    sandeep34
    Participant

    This problem even exists today.

    I found one solution though.
    Style both elements, the element inside Symbol, and the USE tag.

    May 12, 2016 at 5:14 am #241549
    sf_cv
    Participant

    Indeed not working. @Sandeep34, how could you get it to work?

    May 12, 2016 at 5:25 am #241550
    sf_cv
    Participant

    Think I found a solution… By following the link posted by @Brian, I’ve tried to replace the fill attribute in the svg by fill=”currentColor” and by using the attribute color in my css (fill does not seem to work…), this has indeed worked in Chrome. It seems to work well in Safari and Firefox too.

    October 4, 2016 at 7:18 am #246141
    basement31
    Participant

    If you remove the fill attribute from the actual svg file you will be able to change the fill colour of the symbol/path via css even with a external href path.

    Hover the Heart or Basket icons in the top right for an example
    http://loaf.com/

    October 13, 2016 at 11:59 am #246499
    Historical Forums User
    Participant

    Hi,
    I was having the same issue for different projects. Today I just got rid of the fill itself in the SVG file and then added it with CSS with a regular class.

    So after running SVGO task there is no fill attribute at all on my svgs.

    Try it.

    April 8, 2017 at 8:36 am #253526
    autoschematic
    Participant

    So, I was having a problem styling the SVGs in Chrome with CSS because I was using the wrong attribute.

    I was trying to set the color property – when I needed to be setting the fill property – like so:

    .svg {
    fill: #FFF;
}

    I added fill and everything works great

    I hope this helps someone :)

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