SVG集团翻译问题-单位错误？

首先，我对SVG有点陌生。我刚刚开始为我所在地区支持的产品制定具有甘特式风格的时间表/路线图。每个项目都有一个类别和子类别，然后有多个版本。每个产品最终都作为自己的单独微型图表。SVG是由产生的d3.js，但是问题似乎与JavaScript无关。

SVG示例在这里：http : //plnkr.co/edit/ipqZIZODDN4lYKVeLt73

从根本上讲g，应该将两组堆叠在一起。在示例中，分别有红色和蓝色轮廓。蓝色组应位于红色组的正下方。为了定位蓝色组，我使用来测量红色组的高度getBBox。然后，我transform在蓝色组上使用该高度和属性。

以下是相关的组：

<g class="product" transform="translate(0,0)" style="outline: thin solid red">...</g>
<g class="product" transform="translate(0,122)" style="outline: thin solid blue">...</g>

注意： 这些组包含在许多其他组中，但是没有转换（除外translate(0,0)）应用于这些组。

在示例中，如果您使用chrome inspector来测量红色组的高度，则为121像素：

因此，用于translate蓝色组的122应该很好。但是，渲染时，红色和蓝色组明显重叠：

实际上，如果您在Chrome浏览器中调整数字，则需要143像素的偏移量：transform="translate(0,143)"，在两组按照我希望的方式对齐之前：

翻译单位不是以像素为单位吗？我没有看到任何明显的理由，除非如此，否则122单位转换不会移动组122像素。它确实在IE11中呈现了相同的方式，因此它一定是关于SVG或我不知道的此标记的。

有人有什么想法吗？

更新今天早上，我拍了一些屏幕截图并测量了盒子的像素值。确实，蓝色框的高度为121像素，getBBox而我使用过的各种浏览器检查器都建议这样做。然后，我测量了偏移量，发现应该向下转换122像素的像素实际上只有100像素。此外，如果使用手动校正的平移（向下143像素），则将测量正确的121像素偏移：

问题出现在IE11，IE11-Edge（Spartan），Chrome 40和Firefox 36中。在每个现代浏览器呈现几乎相同的效果的情况下，标记必须是问题，对吗？那么缺少的22个像素在哪里呢？