CODEWITHSUNDEEP
jqueryhtmlcsssvg
Janath
Janath

Reputation: 1248

Change SVG fill color with <use> tag not working

I just want to change the svg fill color and hover color. But I saw this svg attached like this:

<use xlink:href="#search-magnify"></use>

I think it's referring to this svg somewhere from the website. I just want to change the fill color without editing the original svg. So I tried wrapping it on span with class and style this way.

.icon svg path{
  fill: red;
  color: red;
}

But it's not working at all. Here is the fiddle.

What am I missing here? Can this not be achieved by css?

Upvotes: 5

Views: 2181

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14545

When using the <use> command, SVG elements fall into the shadow DOM

Read the article:
Styling SVG Content with CSS by Sara Soueidan

The Shadow DOM is similar to the normal DOM except that, instead of being part of the main document subtree, nodes in the Shadow DOM belong to a document fragment which is basically just another subtree of nodes which are not as vulnerable to scripts and styles as normal DOM nodes are. This gives authors a way to encapsulate and scope styles and scripts when creating modular components. If you’ve ever used the HTML5 video element or the range input type and wondered where the video controls or range slider components came from, then you’ve already come across the Shadow DOM before.

Therefore, add color inheritance for path 

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}

Below is the full code

.icon svg path {
    fill: inherit;
}
use.sm {
    fill: red;
}
<svg version="1.1" id="search-magnify" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="30%" height="30%" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>
        
<span class="icon">
 <svg class="icon-svg svg-search" width="15%" height="15%">
 <use class="sm" xlink:href="#search-magnify"></use>
 </svg>
</span>

Live Demo

Upvotes: 5

enxaneta
enxaneta

Reputation: 33024

A few observations:

  1. In css you are styling the use element not the path.

  2. Here <use xlink:href="#search-magnify"></use> search-magnify should be the id of the path not the id of the svg element

  3. You need also a viewBox for the svg element that is using the path 

.icon svg use{
  fill: red;
}
<span class="icon">
 <svg class="icon-svg svg-search" viewBox="0 0 57 57" width="20" height="20">
 <use xlink:href="#search-magnify"></use>
 </svg>
</span> 


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path id="search-magnify" class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>

Upvotes: 1

Related Questions