Chrome not picking up path id's from css or is it me?

[vzed]

This works in Safari and Firefox awesome but to my total shock not woking in chrome.

Both paths are purple in chrome, even if i remove the fill from .icon-x it shows black never plum and/or skyblue

— svg —-

<svg xmlns="http://www.w3.org/2000/svg" >
    <defs>
        <symbol id="symbol-id"  viewBox="...">
            <path id="path-id-right" d="..."/> **** id and path  only****
            <path id="path-id-left" d="..."/> **** id and path  only****
        </symbol>
    </defs>
</svg>

----css -----

.icon-x{width:232px;height:232px;
    fill:purple;
}
#symbol-id #path-id-left{ fill: plum; }
#symbol-id #path-id-right{ fill: skyblue; }

---html ----
<svg class="icon-x">
    <use xlink:href="res/img/build/svg-store.svg#symbol-id"></use>
</svg>

[Paulie_D]

You’d need to demo it but I’m pretty sure you can’t do it that way….at least not referencing the internals of a <use> by symbol ID.

[vzed]

The goal is to have multicolor svgs, I’m the designer and the html/css guy at work so I’m naming the layers in my illustrator file so the paths in my svg’s can be changed by my css on the fly by referencing the ID’s but chrome doesn’t seem to care.

In the link the X icon should be blue and pink. Chrome not working

View in Safari, Firefox, Chrome:
–html–
http://flashworkxstudios.com/svgcss/index.html

–css–
http://flashworkxstudios.com/svgcss/css.css

–svg—
http://flashworkxstudios.com/svgcss/svg-store.svg (inspect to see svg defs chunk)

[Paulie_D]

Works for me in Chrome 51

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

But this won’t work if the SVG isn’t inline in the document somewhere.

Otherwise I think you need a JS helper script. “SVG4Everyone” I think it’s called.

https://jonathantneal.github.io/svg4everybody/

[vzed]

Ha you must know a guy

Version 50.0.2661.94 (64-bit)

Google Chrome is up to date.

Actually your pen works in 50 with the def in the html . But my example has an external reference (<use xlink:href=”svg-store.svg#x”></use>). Guess i’ll have to wait for Chrome 51 way back here hahaha

[bearhead]

Paulie_D’s pen works for me in chrome version 50.0.2661.94 m.

Like Paulie_D wrote, chrome won’t let you apply css to an external svg. As far as I know this is the expected behavior.

See this thread for a more detailed discussion:
https://github.com/jonathantneal/svg4everybody/issues/58#issuecomment-130687454

[vzed]

great, you have 50 so look at my link and inspect it . I’ve included the svg4everbody.js and still no dice .

So if the answer is NO externals in chrome cool , then I can work on a plan B . I’m making sure I’m not missing something because it seems like a no brainer for google

thanks guys for awesome input

[bearhead]

Yeah, I’m not totally sure about what that plugin is supposed to do… as you wrote, the fill colors are still not being applied in chrome. I’m pretty sure it is just not possible for chrome to apply css directly to elements in an external svg file.

I do think you could add a fill to the <use> element’s style, and that would cascade down to the svg.

I believe the issue is due to the fact that when an external svg is added via a <use> element, it is not actually added to the DOM.

[Author]

Posts