代码之家 › 专栏 › 技术社区 › McLaren

增加笔划宽度属性后,图标将被裁剪

svg

McLaren · 技术社区 · 7 月前

我在Figma中制作了一个简单的小图标,将其作为svg上传,我需要增加笔划宽度属性。然而,这导致图标被裁剪。我尝试过调整viewBox、宽度和高度属性,但无法获得正确的比例。也许是别的什么?以下是svg图标的代码:

<svg width="152" height="132" viewBox="0 0 152 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
<circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
</svg>

1 回复 | 直到 7 月前

Åukasz Daniel Mastalerz 7 月前

您只需调整 viewBox ,绘制svg的地方。如果你增加 stroke-width 您可以增加绘图区域,从而剪裁曲线。

值得理解的是 viewBox 正确地。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

<svg width="152" height="132" viewBox="-8 -8 168 148" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
  <circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
</svg>