为什么文本和 SVG 元素之间有间隙？

Answer 1

使用开发工具检查它，它会告诉你什么占用了空间。看看这个

您有一个

<svg>

元素作为字符串，然后创建一个新的

svg

元素并将

<svg>

字符串作为该新元素的子内容。

此外，您正在设置

style.marging

我认为您的意思是设置

style.margin

请参阅以下更改。您不需要在字符串中定义所有这些 SVG 元素属性，而是需要在代码中定义它们并将每个属性设置为属性。我创建了一个辅助函数，只要您将 SVG 元素的内容作为字符串传递给它，它就会为您完成此操作。这也意味着您只需将

<path>

元素保存为字符串，而不是将整个 svg 元素保存为字符串。

var tickPath = '<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>'
var crossPath = '<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>'

function createSvgEl(pathString){
  const svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
  svg.innerHTML = pathString
  svg.style.margin='0'
  //svg.style.flex='auto'
  svg.setAttribute("xmlns","http://www.w3.org/2000/svg");
  svg.setAttribute("width", "16");
  svg.setAttribute("height", "16");
  svg.setAttribute("fill", "currentColor");
  svg.setAttribute("class", "bi bi-check-square-fill");
  svg.setAttribute("viewBox", "0 0 16 16");
  
  return svg;
}

const fragment = document.createElement('span')
fragment.style.display = 'flex'
const l1 = document.createElement("label")
l1.textContent = "HWjgvttgvyvytvhgvhgvhgvhtvytcytcytcytcytcyt";
l1.style.margin='0'
//l1.style.flex='auto'

fragment.appendChild(createSvgEl(tickPath))
fragment.appendChild(l1)

document.body.appendChild(fragment);