如何消除按钮中SVG图标周围的多余空白区域？

我正在制作带SVG图标的按钮，但按钮内的SVG图标周围有多余空白，尝试设置margin:0和padding:0无效。相关代码如下：

SVG代码 #

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="656.43794" height="512.49902" viewBox="-50.21898,227.25048,656.43794,512.49902">
  <g fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
    <path d="M579.23627,312.09078l-371.74723,371.74722l-28.9288,28.9288c-15.97694,15.97694 -41.88067,15.97694 -57.8576,0l-28.9288,-28.9288l-115.01012,-115.01012c-15.97694,-15.97694 -15.97694,-41.88067 0,-57.8576c15.97694,-15.97694 41.88067,-15.97694 57.8576,0l115.01012,115.01012l371.74721,-371.74721c15.97694,-15.97694 41.88067,-15.97694 57.8576,0c15.97694,15.97694 15.97694,41.88066 0.00001,57.85759z" id="Path 1" />
  </g>
</svg>

JavaScript代码 #

async function submitClicked() {
  local1 = document.getElementById("submitButton");
  if (document.getElementById("textInput").value.trim() != "") {
    document.getElementById("textInput").style.borderBottom = "3px solid green";
    document.getElementById("textInput").disabled = true;
    local1.style.width = '55%';
    await sleep(0.25);
    local1.innerHTML = `Redirecting <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="checkmark" width="656.43794" height="512.49902" viewBox="-50.21898,227.25048,656.43794,512.49902"><g fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M579.23627,312.09078l-371.74723,371.74722l-28.9288,28.9288c-15.97694,15.97694 -41.88067,15.97694 -57.8576,0l-28.9288,-28.9288l-115.01012,-115.01012c-15.97694,-15.97694 -15.97694,-41.88067 0,-57.8576c15.97694,-15.97694 41.88067,-15.97694 57.8576,0l115.01012,115.01012l371.74721,-371.74721c15.97694,-15.97694 41.88067,-15.97694 57.8576,0c15.97694,15.97694 15.97694,41.88066 0.00001,57.85759z" id="Path 1"/></g></svg>`;
    local1.disabled = true;
  } else {
    document.getElementById("textInput").style.borderBottom = "3px solid red";
    local1.style.background = 'red';
    local1.style.width = "50%";
    local1.innerHTML = `Submit <i class="fa-solid fa-xmark"></i>`;
  }
}

CSS代码 #

#submitButton {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 2vh;
  color: black;
  fill: black !important;
  background: var(--theme);
  border-radius: 1rem;
  font-family: var(--font1);
  transition: background ease 0.5s, color ease 0.5s, border-radius ease 0.5s, width ease 0.5s, fill ease 0.5s;
  height: 10%;
  width: 40%;
  border: none;
  text-align: center;
  font-size: 3vw;
  padding: 1rem;
}

#submitButton:hover {
  cursor: pointer;
}

#checkmark {
  width: 50%;
  height: 50%;
  margin: 0;
  padding: 0;
}

解决方法 #

问题根源在于SVG的viewBox包含大量空白区域，加上SVG作为inline元素的基线对齐特性，导致出现多余空白。按以下步骤修改：

1. 优化SVG的viewBox和尺寸
   原SVG的viewBox起始坐标为负数，范围远大于图形实际大小，修改为刚好包裹图形的范围，同时调整宽高比例。修改后的SVG代码：

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="checkmark" viewBox="0 0 570 570" width="24" height="24">
     <g fill="#000000" stroke="#000000" stroke-width="30" stroke-linecap="round" stroke-linejoin="round">
       <path d="M509,122L137,494l-29,29c-16,16-42,16-58,0l-29-29L1,350c-16-16-16-42,0-58c16-16,42-16,58,0l115,115l372-372c16-16,42-16,58,0c16,16,16,42,0,58z"/>
     </g>
   </svg>
   

2. 修改CSS，让SVG以块级元素显示
   在#checkmark的CSS规则中添加display: block，避免inline元素的基线空白：

   #checkmark {
     width: 50%;
     height: 50%;
     margin: 0;
     padding: 0;
     display: block;
   }
   

3. 更新JavaScript中的SVG代码
   将JS里插入的SVG替换为优化后的版本，确保viewBox和尺寸正确，避免引入原始的大尺寸空白SVG。

完成以上修改后，SVG图标周围的多余空白就会消失，图标能和按钮内的文本正确对齐。

内容的提问来源于stack exchange，提问作者user23188822