我正在尝试添加带有圆形灰色背景的SVG图标。但是问题在于，应用边框 - 拉迪乌斯（Border-radius）使其圆形剪辑了SVG徽标的左下部分。我已经玩过填充物，但它不允许我设置一个完美的圆圈而不会损害边界 - 划线。

问题描述 投票：0回答：2

至少需要20px Border-radius才能获得圆形。在此图像中，我删除了边界 - 拉迪乌斯（Border-Radius），而SVG没有被剪裁。 

我需要获得圆形的背景，而不会发生剪裁。

enter image description here .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的方法。该片段使用Flex将其集中在图标元素中。它使用50％作为图标元素的边框半径来确保一个圆（无论您决定在图标元素上拥有什么尺寸和填充）。

html css svg
2个回答
3
投票

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

As
@ahoth
已经指出：最好将
border-radius
申请到您的外部部门。
作为Flex的替代方案，您还可以通过

transform

：
0
投票
.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%; }

其他方法是将图标svg的一个元素预先介绍： <circle>

示例片段：CSS和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>



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






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




实际上，这是一个简单的技巧。在SVG元素上添加
<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>
    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.