防止边框半径在 CSS 中剪裁 SVG 图标答案

【问题标题】：Prevent border-radius from clipping SVG icon in CSS防止边框半径在 CSS 中剪裁 SVG 图标
【发布时间】：2022-10-22 19:45:59
【问题描述】：

我正在尝试在圆形中添加一个灰色背景的 SVG 图标。但问题是应用border-radius使其变为圆形会剪裁SVG徽标的左下部分。我玩过填充，但它不允许我在不影响边框半径的情况下设置一个完美的圆。您可以在这张图片的左下角看到一个小剪裁：

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 20px;
}

它需要至少 20px 的边框半径才能获得圆形。在这张图片中，我删除了边框半径并且 SVG 没有被剪裁。

我需要在不发生剪裁的情况下获得圆形背景。

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    padding: 5px 7px;
    background: hsla(0, 0%, 20%, 1);
    border-radius: 40px;
   padding: 10px 13px;
}

.icon {
  height: 70px;
  width: 70px;

}

<html>
<body>
<div class="icon">
  <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
</div>

</body>
</html>

【问题讨论】：

你能创建一个嵌入了 SVG 的 sn-p 吗？所以我们可以直接看到你的问题。
可能您需要更改 svg 元素的 viewBox。正如克隆在上面评论的那样，我们需要查看 svg 元素的代码
添加了sn-p。

标签： html css svg

【解决方案1】：

它是包含的图标元素，您希望它是圆形的并具有该背景颜色，并且可能带有一些填充。

有多种定位 svg 的方法。这个 sn-p 使用 flex 使其在图标元素中居中。它使用 50% 作为图标元素的边框半径来确保一个圆圈（无论您决定在图标元素上使用什么大小和填充）。

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  width: 80%;
}

.icon {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 20%, 1);
  padding: 10px;
}

<html>

<body>
  <div class="icon">
    <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512"><path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"></path></svg>
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

正如@A Haworth 已经指出的那样：最好将border-radius 应用于您的外部div。

作为 flex 的替代方案，您还可以通过 transform 重新定位您的图标：

.tik-tok-icon {
    fill: hsla(0, 0%, 50%, 1);
    transform: scale(0.6) translate(5%, -8%);
}

.icon {
  background: hsla(0, 0%, 20%, 1);
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

另一种方法是将<circle> 元素添加到您的图标 svg：

<svg class="tik-tok-icon2" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 512 512">
  <circle class="icon-bg" cx="50%" cy="50%" r="50%" fill="#ccc" />
  <path class="icon-path" transform-origin="center" transform="scale(0.7) translate(40, 0)" d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
</svg>

示例 sn-p：css 和 svg

.tik-tok-icon {
  fill: hsla(0, 0%, 50%, 1);
  transform: scale(0.6) translate(5%, -8%);
}

.icon {
  background: hsla(0, 0%, 20%, 1);
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.tik-tok-icon2 {
  display: inline-block;
  width: 70px;
}

.icon-bg {
  fill: hsla(0, 0%, 20%, 1);
}

.icon-path {
  fill: hsla(0, 0%, 50%, 1);
}

<p>Border radius</p>
<div class="icon">
  <svg class="tik-tok-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 448 512">
    <path d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
  </svg>
</div>

<p>Circle bg in svg</p>

<svg class="tik-tok-icon2" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fab" data-icon="tiktok" class="1 _icon_1ijny5" viewBox="0 0 512 512">
  <circle class="icon-bg" cx="50%" cy="50%" r="50%" fill="#ccc" />
  <path class="icon-path" transform-origin="center" transform="scale(0.7) translate(40, 0)" d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z" />
</svg>

这样，您的图标可以通过更改图标宽度/高度轻松调整大小。此外，您可以将图标保存为静态资产，保留其圆形。

【讨论】：