SVG图标更改填充颜色

Question

我有一个Facebook SVG图标，需要能够更改圆圈颜色和内部颜色（图标本身）。如何将其从透明更改为白色？

我有以下内容： 我需要以下内容： SVG代码：

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

- Max T

---

你节省了我很多努力。我不太确定如何向谷歌提问！ :) - Subrata Sarkar

Answer 1

问题在于SVG中的<path>只是定义了你的图标黑色部分的形状。

如果想使"f"成为白色，有两个选项：

1.在路径后面添加一个白色形状，以便它通过孔洞显示出来。

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. 将路径分成两部分：外部圆圈和“f”形。将“f”形变为白色。

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>

选择您喜欢的那个。

- Paul LeBeau

---

哈！我们的答案几乎一样，你比我快60秒 :) - disinfor

我更喜欢使用第一种方法，因为它更干净且更容易理解，特别是像我这样的人 :) 非常感谢！它运行得很好。 - Subrata Sarkar

Answer 2

嗯，你无法改变徽标中 f 的颜色，因为黑色实际上是从圆形中切割出来的一个形状。但你可以在 SVG 中添加另一个形状，放在徽标后面。

我简化了你的 SVG 代码：

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

可运行的例子：https://jsfiddle.net/disinfor/gvpeLn91/

- disinfor

Answer 3

最明显的方法当然是编辑SVG，另一个选项是添加与黑色圆形匹配的伪元素。

如果例如从CDN或类似位置加载图标而无法编辑SVG，则此技巧可能非常方便。

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>

- Asons

Answer 4

到目前为止，我发现最好的方法是使用CSS的clip-path属性。它适用于任何透明图像。

img {
  background: #ff1234;
  clip-path: circle(50% at 50% 50%);
}

<img src="https://image.flaticon.com/icons/png/512/8/8730.png" width="150" height="150" />

关于剪裁和遮罩的更多信息，请访问https://css-tricks.com/clipping-masking-css/。

- Andrea Puddu