如何更改 svg 图标的笔画宽度？答案

【问题标题】：How to change stroke width of svg icon?如何更改 svg 图标的笔画宽度？
【发布时间】：2021-09-17 16:20:36
【问题描述】：

我的 svg 图标风格非常简单。我想将此图标的笔画宽度更改为 2px。我将 svg 样式的笔画宽度更改为 2，但图标的顶部已被切断。

有人知道如何将此属性设置为具有笔画宽度：2 但没有任何切口？

.header__button-icon {
    width: 24px;
    height: auto;
}

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" class="header__button-icon" width="21" height="21" viewBox="1.5 2 21 21">
  <defs>
    <style>.a{fill:none;stroke:#200e32;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1.5px;}</style>
  </defs>
  <g transform="translate(2.778 2.778)">
    <circle class="a" cx="8.989" cy="8.989" r="8.989"></circle>
    <path class="a" d="M0,0,3.524,3.515" transform="translate(15.24 15.707)"></path>
  </g>
</svg>

【问题讨论】：

标签： html css svg

【解决方案1】：

调整 viewBox 大小。随着您的形状变大，您的 viewBox 也需要变得更大，以便它包含整个展开的形状。

.header__button-icon {
    width: 24px;
    height: auto;
}

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" class="header__button-icon" width="21" height="21" viewBox="1.5 1.5 21 21.5">
  <defs>
    <style>.a{fill:none;stroke:#200e32;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:2px;}</style>
  </defs>
  <g transform="translate(2.778 2.778)">
    <circle class="a" cx="8.989" cy="8.989" r="8.989"></circle>
    <path class="a" d="M0,0,3.524,3.515" transform="translate(15.24 15.707)"></path>
  </g>
</svg>

【讨论】：

太棒了！我还发现我们是否将这个 CSS 类设置为类似的东西：溢出：可见这也是有效的
@ProteinDev 溢出：可见不利于性能。