时间戳

首页 > 解决方案 > 如何更改 svg 图标的笔画宽度？

html - 如何更改 svg 图标的笔画宽度？

问题描述

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

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

https://jsfiddle.net/kgpj1n06/13/

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

标签： htmlcsssvg

解决方案

调整视图框大小。随着您的形状变大，您的 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>

推荐阅读