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

我不熟悉D3和SVG，尝试在OSX Firefox 61.0.2上使用SVG路径绘制自定义形状，以下是代码

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>

你是说这个吗？（假设x，y是蜡烛的左上角）：

另外，您观察到的差异是因为开发工具的DOM rect依赖于供应商，Firefox增加了笔划宽度，chrome没有。在引擎盖下，客户端rect在这两个方面都是正确的，您可以验证是否：

console.log(p.node().getBBox());//SVGRect { x: 200, y: 100, width: 20, height: 30 }

你是这个意思吗？（假设x，y是蜡烛的左上角）：

另外，您观察到的差异是因为开发工具的DOM rect依赖于供应商，Firefox增加了笔划宽度，chrome没有。在引擎盖下，客户端rect在这两个方面都是正确的，您可以验证是否：

console.log(p.node().getBBox());//SVGRect { x: 200, y: 100, width: 20, height: 30 }

---

它似乎与

笔划斜接限制

用于计算尺寸的方式有关。将

stroke mit

更改为

1

时，它会将高度从

4

调整为

1.45001

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，1800）
.attr（“高度”，600）
功能抽蜡烛（x、y、宽度、上部、主体、下部）{
var path=d3.path（）
//路径移动到（x+宽度/2，y）
//路径.线条到（x+宽度/2，y+上部+主体+下部）
路径。移动到（x，y+上）
path.lineTo（x+宽度，y+上部）
path.closePath（）
返回路径
}
var p=svg.append（'path'）
console.log（p.style（'stroke-width'））
p、 属性（'d'，抽蜡烛（200100,20,50,100,80））

路径{
笔画：蓝色；
笔画宽度：1px；
行程限制：1；
}

---

它似乎与

笔划斜接限制

用于计算尺寸的方式有关。将

stroke mit

更改为

1

时，它会将高度从

4

调整为

1.45001

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，1800）
.attr（“高度”，600）
功能抽蜡烛（x、y、宽度、上部、主体、下部）{
var path=d3.path（）
//路径移动到（x+宽度/2，y）
//路径.线条到（x+宽度/2，y+上部+主体+下部）
路径。移动到（x，y+上）
path.lineTo（x+宽度，y+上部）
path.closePath（）
返回路径
}
var p=svg.append（'path'）
console.log（p.style（'stroke-width'））
p、 属性（'d'，抽蜡烛（200100,20,50,100,80））

路径{
笔画：蓝色；
笔画宽度：1px；
行程限制：1；
}

---

谢谢，但问题是为什么宽度显示不正确，这是完整的蜡烛如果您注意到在“检查元素”部分，它的宽度似乎超过了20，因为没有viewBox属性，你希望它是1:1吗？是的，宽度和高度都是1:1。我尝试将viewBox添加到同一支笔上，但大小仍然是24 x 34，宽度已声明为20，即使它在两侧添加笔划，也只能是22而不是24，到底是什么问题，我已更新了该笔报告的内容和acutal的内容有所不同。在控制台上执行此操作：

console.log（p.node（）.getBBox（））它将在firefox中报告一个包含20 30的矩形，但开发工具将添加笔划宽度。这是供应商的实现。谢谢，但问题是为什么宽度显示不正确，这是完整的蜡烛如果您注意到在“检查元素”部分，它的宽度似乎超过20，因为没有viewBox属性，你希望它是1:1吗？是的，宽度和高度都是1:1。我尝试将viewBox添加到同一支笔上，但大小仍然是24 x 34，宽度已声明为20，即使它在两侧添加笔划，也只能是22而不是24，到底是什么问题，我已更新了该笔报告的内容和acutal的内容有所不同。在控制台上执行此操作：
console.log（p.node（）.getBBox（））它将在firefox中报告一个包含20 30的矩形，但开发工具将添加笔划宽度。这就是供应商实施。难以置信！这是一个完美的答案，改变它会大幅度地改变宽度，虽然仍然不如渲染的本地矩形准确，但在维度上肯定会有一些变化，令人难以置信！这是一个完美的答案，更改它会大幅度更改宽度，虽然仍然不如渲染的本机矩形准确，但维度肯定会有一些更改
console.log(p.node().getBBox());//SVGRect { x: 200, y: 100, width: 20, height: 30 }