SVG-Symbol ändern innerhalb Füllfarbe

Question

Ich habe dieses Facebook SVG-Symbol, das ich in der Lage sein, die Kreisfarbe und die Innenfarbe (Symbol selbst) ändern können. Wie ändere ich es von transparent zu weiß?

, was ich habe , was ich brauche

SVG-Code:

<?xml version="1.0" encoding="iso-8859-1"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<div id="facebook"> 
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" 
    xml:space="preserve"> 
<g> 
    <g> 
     <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z 
      "/> 
    </g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
</svg> 
</div> 

Answer 1

Das Problem ist, dass die <path> in der SVG nur die Form des schwarzen Teil Ihres Symbol definieren .

Wenn Sie das "f" weiß machen möchten, gibt es zwei Möglichkeiten.

1. fügen Sie eine weiße Form hinter dem Pfad hinzu, so dass es durch das Loch zeigt.

div { 
 
    background-color: orange; 
 
}

<div id="facebook"> 
 
<svg id="Capa_1" 
 
    width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652"> 
 
    <circle cx="25" cy="25" r="20" fill="white"/> 
 
    <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/> 
 
</svg> 
 
</div>

2. Split der Weg in seine zwei Teilen: dem äußeren Kreis und die "f" -Form. Machen Sie die "f" -Form weiß.

div { 
 
    background-color: orange; 
 
}

<div id="facebook"> 
 
<svg id="Capa_1" 
 
    width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652"> 
 
    <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 C49.652,11.137,38.516,0,24.826,0z"/> 
 
    <path d="M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z" fill="white"/> 
 
</svg> 
 
</div>

holen, die Sie bevorzugen.

Answer 2

Nun, Sie können die Farbe der f im Logo nicht ändern, da das Schwarz ist alle eine Form, so dass es tatsächlich aus dem Kreis ausgeschnitten ist. Was Sie tun können, ist eine andere Form hinzufügen, die hinter dem Logo in Ihrem SVG sitzt.

schneide ich den SVG-Code unten Sie haben:

SVG:

<div id="facebook"> 
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" xml:space="preserve"> 
    <circle cx="25" cy="25" r="20" class="circle"/> 
     <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z 
      " /> 


    </svg> 
</div> 

CSS

#facebook { 
    background-color: red; 
} 

.circle { 
    fill: white; 
} 

Arbeits Geige: https://jsfiddle.net/disinfor/gvpeLn91/

Answer 3

T Am offensichtlichsten ist es natürlich, das SVG zu bearbeiten, eine andere Möglichkeit wäre, ein Pseudoelement hinzuzufügen, das dem schwarzen Kreis entspricht.

Dieser Trick kann nützlich sein, wenn man zum Beispiel Symbole aus einem CDN oder ähnlichem lädt, wo es nicht möglich ist, das SVG zu bearbeiten.

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: red; 
 
    padding: 10px; 
 
} 
 

 
div svg { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
div::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    width: calc(100% - 20px); 
 
    height: calc(100% - 20px); 
 
    border-radius: 50%; 
 
    background-color: white; 
 
}

<div id="facebook"> 
 
    <svg id="Capa_1" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652"> 
 
    <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 
 
      C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 
 
      v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/> 
 
</svg> 
 
</div>