Using the use tag for SVG fills is a great way to

Currently, I am attempting to modify the color of an SVG that is displayed on various pages using the code 

<svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
.

You can find the methods I have been experimenting with here: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/.

Below is a snippet of the SVG symbol that I am importing:

<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>

In my stylesheet, there is the following style:

#masthead > .content-width .site-branding .logo--white a #logo-svg {
    fill: #fff;
    stroke: #fff;
}

The stroke color works correctly for the #outer-circle, however, the fill does not work for the path within #ceramics.

If anyone could provide insight into this issue, it would be greatly appreciated! Thank you in advance!

UPDATE: Following further investigation, I have modified this question as the problem seems to lie in styling elements within shadow-dom svgs.

csssvgshadow-dom

Answer №1

It's actually quite simple to find the solution you need. All you have to do is replace every instance of fill = "none" in your svg file with fill = "currentColor". By doing this, all the fill properties within the svg element will inherit the color from its parent element. Don't forget to add a color property to the parent element.

.logo-svg {
    color: #fff;
}

.logo-svg--yellow {
    color: yellow;
}
<svg class="logo-svg">
  <use href="#some-svg" xlink:href="#some-svg" />
</svg>

<svg class="logo-svg--yellow">
  <use href="#some-svg" xlink:href="#some-svg" />
</svg>

<svg id="some-svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="currentColor" />
</svg>

Your question and the answer provided above helped me solve my issue by implementing the suggested changes.

UPD. With the new guidelines in place,

you should now use href instead of xlink:href

Answer №2

It looks like your work is going well, as shown below. Maybe this can assist you.

If the "ceramics" path is not visible, there may be an issue with it. However, we would need to inspect it to determine the problem.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Give a radio button some class

<input id="radio1" type="radio" name="rgroup" value="1" > <label for="radio1"><span><span></span></span>1</label> <input id="radio2" type="radio" name="rgroup" value="2" > <label for="radio2"><span ...

javascripthtmlcssradio-button

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

cssblazorblazor-webassemblyrazor-class-library

Issue arising with the resizing of the image in the main section, as it is shrinking prematurely before reaching the designated width

Desired Outcome Current Situation Currently, I am in the process of creating a responsive hero section where I aim to maintain the image at full size until the window width reaches below 1300px. However, I have observed that the image starts to shrink mu ...

htmlcssresponsive-design

unusual occurrences with CSS and JavaScript when hovering over TEXTAREA or A elements

Lately, I've been facing an unusual issue in my web application (php) that was fine just a month ago. Upon hovering over a specific < TEXTAREA > or two buttons (add, exit) within a DIV, the background color of the DIV fills up, rendering the IN ...

javascripthtmlcss

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

I'm almost done with my Weather Forecast page for the FCC challenge. However, I'm not satisfied with how the code for swapping the background works. It just doesn't feel right to me. Unfortunately, I can't figure out how to fix it. Addi ...

javascriptjqueryhtmlcss

Menu options disappearing upon clicking within the container area

Every time I click inside the dropdown menus, they unexpectedly close. This issue is persistent in both the Login menu and the nav bar. Although I’m not a seasoned web developer, I suspect it’s just a simple error that I’ve been overlooking all day ...

javascriptjqueryhtmlcss

Efficiently adjust the width of a child div to automatically fit within

I stumbled upon this fascinating jsfiddle on this website that almost completely addresses my concern, solving up to 90% of it. Check out the JSFiddle Nevertheless, I am keen to incorporate margins within the inner divs. Despite attempting to modify the ...

jqueryhtmlcss

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

jquerycssshow

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

Utilize the controller data to display information on a day-by-day basis

In my attempt to design a weekly calendar using AngularJS, I am facing challenges when it comes to inserting events into the 7 boxes representing each day of the week on the calendar. The current HTML structure is as follows: <div class="week"> ...

javascripthtmlcssangularjs

What is the best way to add attractive share buttons for Facebook, Twitter, and G+ on your

I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...

htmlcssfacebooktwittergoogle-plus

javascript - Alternate text colors several times within specified color ranges

Seeking assistance with changing the text color multiple times from #627CA9 to #FFFFFF and vice versa. Here's what I've tried: function changeColor(id) { var x = document.getElementById(id); if (document.getElementById(id).style.color = " ...

javascripthtmlcsscolorstextcolor

What is the process for generating a flexible multi-column unordered list in a single column using Bootstrap 4?

I have been attempting to design a multi-column unordered list that can be centered in relation to its heading. Despite trying various methods found online to create two columns, I have struggled to properly center it under a heading or adjust the padding ...

htmlcsstwitter-bootstrapbootstrap-4

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides

Having some trouble with an HTML 5 project where the video plays on Chrome and Safari PC browsers but not on iPad. The task at hand is to get it working in portrait mode only, with the video playing when tapped/clicked. <!doctype html> <!--[if ...

javascriptcssipadhtmlhtml5-video

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

htmlcssreactjsanimationcss-animations

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...

htmlcsswordpress

Flipping over every single card, but only desire to flip them one at a time

My attempt to flip these cards individually has resulted in them all flipping together. I suspect there may be an error in my JavaScript code. In the original code, I used images in front and an unordered list in the back, but here I have simplified it t ...

javascripthtmljquerycss

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

htmlcssfirefox-quantum

What is the best way to toggle between display:none and display:block?

How can I delay the appearance of mobile nav items without using JS until the nav overlay fully expands for 0.4s? In the non-overlay state, the top nav has a hamburger menu on the left and my name on the right with hidden nav links. When in the overlay s ...

cssanimationcss-transitionscss-animations

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

csstypescriptnext.jshyperlinkcard