在 CSS 中设置 SVG 颜色以覆盖整个背景答案

【问题标题】：Setting SVG color in CSS to cover the whole background在 CSS 中设置 SVG 颜色以覆盖整个背景
【发布时间】：2020-04-30 10:26:23
【问题描述】：

我有一组 SVG 格式的社交媒体图标，我使用 2em 的高度和宽度属性。但我的背景颜色不是白色。我一直认为这不是问题，直到我尝试通过设置 SVG 的背景颜色来解决问题。出于某种原因，SVG 的背景不是整个 SVG，而是它的一部分。你可以在sn-p中看到它。也许它与 SVG 的 viewBox='0 0 24 24' 属性有关。是否可以将背景设置为匹配 2em x 2em - 就像我设置的 SVG 的大小一样？

没有白色背景，SVG 看起来不太漂亮。

更新：与初始版本相比，我对代码进行了一些更改。现在看起来像这样：

body {background: rgba(78, 192, 253, .7);}
.tg:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
    background-color: #fff;}
    
    .soc {
    padding: 0.5em;
}

<fieldset class="fs01">
                    <legend><a href="https://t.me/grolribasi" class="soc tg" target="_blank">@Grolribasi</a></legend>
                    <p class="soc">Text goes here</p>
                </fieldset>

【问题讨论】：

标签： html css svg

【解决方案1】：

解决您的问题的一种可能方法是向 svg 元素添加一条白色填充路径，如下所示：

body {background: rgba(78, 192, 253, .7);}
.soc:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath fill='white' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/%3E%3Cpath d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
}

<body>
<a href="https://t.me/grolribasi" class="soc tg" target="_blank">tg</a><br>
 <a href="https://t.me/grolribasi" class="soc" target="_blank">tg</a><br>
</body>

为了获得正确的路径，我使用了代码中 d 属性的第一部分（从开头到第一个 m 命令）。

解释：

这是我用作背景的 SVG。

<svg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'>
  <path fill="white" d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z'/>
  <path d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Z
           
        m-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'></svg>

原始路径，您在代码中的路径是有洞的。这就是您可以看到蓝色背景的原因。如果你需要平原是白色的，你需要在洞后面使用一些白色的东西。通常一个矩形会做，但你给了圆角路径，如果你使用一个矩形，你会看到白色的角落。

在我的代码中，我采用路径的 d 属性的第一部分，并使用它来绘制具有相同形状的白色路径并将其放在孔后面。

接下来您需要对其进行编码。最简单的方法是使用这个 svg 编码器：https://codepen.io/yoksel/pen/JDqvs

【讨论】：

很好的解决方案！但是我稍微更改了代码，它就停止了工作。看我的原帖。那条白色填充的路径是如何工作的？如果我知道的话，也许我可以自己解决。
谢谢你，现在更清楚了。我什至自己部分地做到了。但是，我不明白为什么当我有
和标签时它不能正确填充。当我尝试填充此图标时：iconmonstr.com/whatsapp-3-svg 根据您描述的方法，它只填充了电话，但没有填充圆圈。它也不适用于这个（没有 m 命令） - iconmonstr.com/email-3-svg.
如果您在使用<fieldset> 和<legend> 时遇到问题，请通过工作示例提出另一个问题。另外我不知道你是怎么画手机和圆圈的，没有看到代码我不能给你答案。

【解决方案2】：

您在链接中插入的 SVG 没有默认大小，您可以将它们添加到元素并控制其大小，以设置 svg 背景。

body {background: rgba(78, 192, 253, .7);}

.soc {
  width: 32px;
  height: 32px;
  background: white;
  display: inline-block;
   border-radius: 8px;
}

.soc:before {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' fill='rgb(0, 136, 204)' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cpath id='telegram-3' d='M19,24l-14,0c-2.761,0 -5,-2.239 -5,-5l0,-14c0,-2.761 2.239,-5 5,-5l14,0c2.762,0 5,2.239 5,5l0,14c0,2.761 -2.238,5 -5,5Zm-2.744,-5.148c0.215,0.153 0.491,0.191 0.738,0.097c0.246,-0.093 0.428,-0.304 0.483,-0.56c0.579,-2.722 1.985,-9.614 2.512,-12.09c0.039,-0.187 -0.027,-0.381 -0.173,-0.506c-0.147,-0.124 -0.351,-0.16 -0.532,-0.093c-2.795,1.034 -11.404,4.264 -14.923,5.567c-0.223,0.082 -0.368,0.297 -0.361,0.533c0.008,0.235 0.167,0.44 0.395,0.509c1.578,0.471 3.65,1.128 3.65,1.128c0,0 0.967,2.924 1.472,4.41c0.063,0.187 0.21,0.334 0.402,0.384c0.193,0.05 0.397,-0.002 0.541,-0.138c0.811,-0.765 2.064,-1.948 2.064,-1.948c0,0 2.381,1.746 3.732,2.707Zm-7.34,-5.784l1.119,3.692l0.249,-2.338c0,0 4.324,-3.9 6.79,-6.124c0.072,-0.065 0.082,-0.174 0.022,-0.251c-0.06,-0.077 -0.169,-0.095 -0.251,-0.043c-2.857,1.825 -7.929,5.064 -7.929,5.064Z'/%3E%3C/svg%3E");
    vertical-align: middle;
    padding-right: 0.25em;
}

<body>
<a href="https://t.me/grolribasi" class="tg" target="_blank"><i class="soc"></i>tg</a><br>
 <a href="https://t.me/grolribasi" target="_blank"><i class="soc"></i>tg</a><br>
</body>

【讨论】：

如果你添加宽度、高度和显示效果很好。但是，如果添加宽度和高度，则会丢失填充。如果您删除它们，您会在图标的右侧和底部显示一些白色背景。右边的空白实际上是 padding-right: 0.25em;在之前。如果您删除显示属性，它会变得更糟。此外，我无法在 .soc 中添加 :before，因为每个链接都有不同的社交网络图标。