为什么这个SVG路径在Firefox上显示的宽度和高度不正确?

var svg = d3.select("body")
  .append("svg")
  .attr("width", 1800)
  .attr("height", 600)

function drawCandle(x, y, width, upper, body, lower){
  var path = d3.path()
  // path.moveTo(x + width/2, y)
  // path.lineTo(x + width/2, y + upper + body + lower)
  path.moveTo(x, y + upper)
  path.lineTo(x + width, y + upper)
  path.closePath()
  return path
}

var p = svg.append('path')
console.log(p.style('stroke-width'))

p.attr('d', drawCandle(200,100,20, 50, 100, 80))

在开发人员工具中检查时生成的路径如下所示

<svg width="1800" height="600"><path d="M200,150L220,150Z"></path></svg>

但是,如果我在元素上使用检查器悬停,则显示宽度为24 x 4

我是不是丢了什么东西?这不是20 x 1吗

path{
  stroke: blue;
  shape-rendering:crispEdges;
}