呈现 SVG 时如何从边框中删除 div 背景颜色轮廓答案

【问题标题】：How to remove div background color outline from border when presenting SVGs呈现 SVG 时如何从边框中删除 div 背景颜色轮廓
【发布时间】：2021-07-30 17:52:12
【问题描述】：

如何在呈现 SVG 时从边框中移除 div 背景颜色轮廓

当我将我的 svg 上传到文本编辑器并将其包裹在具有背景色的 div 周围时，我注意到即使 facebook 图标完全与圆形 div 的侧面相接，div 背景色的轮廓也会模糊边境。我想删除 div 背景颜色的轮廓，使其像素完美。有人知道这辆面包车是怎么修的吗？

到目前为止，我已经尝试使用视图框稍微放大 svg 以使双方相遇。我也尝试过使用 box shadow 属性，尽管我并不真正了解该属性是如何工作的。

就颜色而言，问题只有在放大时才会注意到。如果将背景颜色更改为浅黄色或其他浅色，它会变得更加明显。

如果这不是一个合适的问题，我们深表歉意。这让我很困惑，我想试一试。

#facebook-icon {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-color:blueviolet;
    background-repeat: no-repeat;
    border-style: solid;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: inline-flex;
}

<body>
<div id="facebook-icon">
    <svg id="fb-svg" width="200px" height="200px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="17 17 460 460"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>
</div>
    
</body>

【问题讨论】：

我看到一个黑色圆圈和紫色“F”。究竟需要删除什么？

标签： html svg border background-color

【解决方案1】：

您的 css border-style 设置为 solid。它应该在您的元素周围显示黑色边框。

将border-style 设置为none 为我删除了边框，并给了我这个结果：

https://i.stack.imgur.com/MGE9K.png

你看到的不是背景，而是边框。

【讨论】：

感谢 Storjak。如果放大，您会在边框旁边看到一个非常微弱的紫色/蓝色。颜色越浅越明显。无论如何，您的回答很有帮助。就在我收到您的回复之前，我将边框宽度设置为 0px，它似乎消除了微弱的轮廓。虽然我没有任何声望点，但我已经为你投票了，所以它不会显示。

【解决方案2】：

所以我尝试在 CSS 中更改 div 的border-width 属性，并注意到无论我将黑色边框设置多宽，背景色都会继续达到峰值。但是，当我将边框宽度设置为 0px 时，它终于解决了这个问题。现在无论背景颜色多么浅，它都不可见。

#facebook-icon {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-color:yellow;
    background-repeat: no-repeat;
    border-style: solid;
    border-radius: 50%;
    border-width: 0px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    }

<body>
<div id="facebook-icon">
    <svg id="fb-svg" width="200px" height="200px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="17 17 460 460"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>
</div>
    
</body>
</html>

【讨论】：