为什么此 SVG 路径在 Firefox 上显示的宽度和高度不正确？

Question

我是 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>

如果我使用检查器悬停在元素上，它显示的宽度为 24 x 4

我是不是漏掉了什么？这不应该是 20 x 1 我的 CSS 目前是

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

Answer 1

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

path.moveTo(x, y);
  path.lineTo(x + width, y);
  path.lineTo(x + width, y + upper);
  path.lineTo(x, y + upper);
  path.closePath();

http://jsfiddle.net/ibowankenobi/ozd10hq9/

您观察到的差异也是因为开发者工具的 DOM 矩形取决于供应商，Firefox 添加了笔画宽度，chrome 没有。在幕后，客户端 rect 在这两个方面都是正确的，你可以验证你是否这样做：

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

http://jsfiddle.net/ibowankenobi/k0t4pfjz/

Answer 2

这似乎与 stroke-miterlimit 计算尺寸的方式有关。将 stroke-miterlimit 更改为 1 时，它会将高度从 4 调整为 1.45001

MDN

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

path{
  stroke: blue;
  stroke-width:1px;
  stroke-miterlimit: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>

为什么此 SVG 路径在 Firefox 上显示的宽度和高度不正确？

Why is this SVG Path showing incorrect width and height on Firefox?

svg

stroke

d3.js