主页 / coding / 问题 / 79303041
Accepted
McLaren
Asked: 2024-12-23 20:14:09 +0800 CST

增加 stroke-width 属性后，图标被裁剪

  • 772

我在 Figma 中制作了一个小而简单的图标，将其上传为 svg，我需要增加 stroke-width 属性。然而，这导致图标被裁剪。我尝试过调整 viewBox、width 和 height 属性 - 我无法获得正确的比例。也许是别的原因？这是 svg-icon 的代码：

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

1 个回答

  1. Best Answer

    您只需调整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>

    • 2

相关问题