html - D3 路径缺少高度元素

Question

我使用 d3 创建扁平线

<path d="M76.75,75.00981241717429L230.25,75.00981241717429L383.75, 
75.00981241717429L537.25,75.009812417174291" stroke="#657DBB" class="line" 
style="stroke-dasharray: none; stroke-width: 5; stroke-opacity: 1;">

画线，但在 devtools 中有 0px height 并且当我使用 mask 限制绘图区域时，mask 覆盖所有 0px elements，有人可以帮忙吗？

Answer 1

您看到的是预期的结果。为了计算元素的边界框，使用了 .getBBox() 方法。 .getBBox 的行为由 4.5.23 Interface SVGLocatable 中的 SVG 规范定义。 (强调我的):

Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects).

由于路径移动和行到命令的所有 y 坐标都等于 75.00981241717429，因此规范定义的边界高度显然为零。