Menu
I'm trying to change the color of an SVG displayed on different pages using <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>.
The methods I'm trying are here: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/.
This is the SVG symbol I'm pulling in (shortened to relevant pieces):
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="kmc-logo" viewBox="0 0 151 151">
<g id="logo">
<g id="outer-circle">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M11.51 ..."/>
</g>
<g id="ceramics">
<path stroke="none" d="M39.47 ..."/>
</g>
</g>
</symbol>
</svg>
I have this style in my stylesheet:
#masthead > .content-width .site-branding .logo--white a #logo-svg {
fill: #fff;
stroke: #fff;
}
The stroke color here is working fine for the #outer-circle in the shadow-dom'd SVG above, but the fill isn't working on the path inside #ceramics.
Can anyone shed some light? Thanks in advance!
EDIT: I've updated this question after discovering that the issue isn't with css specificity, but rather with styling elements inside shadow-dom svgs.
910
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb(255,0,0) ), hex values, rgba values, etc.
<use> The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.
The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
What you've done seems okay. I've reproduced it roughly below. Perhaps this will help you.
If your "ceramics" path is not showing, then there might be something wrong with it. But we would need to see it.
body {
background-color: blue;
}
.logo--white #logo-svg {
fill: #fff;
stroke: #fff;
}
.logo--yellow #logo-svg {
fill: #ff0;
stroke: #ff0;
}
div {
width: 100px;
height: 100px;
margin: 20px;
}<svg width="0" height="0">
<symbol id="kmc-logo" viewBox="0 0 151 151">
<g id="logo">
<g id="outer-circle">
<path fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="10"
d="M 25,25 L 25,125"/>
</g>
<g id="ceramics">
<path stroke="none"
d="M 100,25 A 50,50 0 0 0 100,125 A 50,50 0 0 0 100,25 Z"/>
</g>
</g>
</symbol>
</svg>
<div class="logo--white" viewBox="0 0 151 151">
<svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>
<div class="logo--yellow" viewBox="0 0 151 151">
<svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
