如何更改 svg 图标的笔划宽度？

Question

我有我的 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>

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

如何更改 svg 图标的笔划宽度？

How to change stroke width of svg icon?

html

css

svg