SVG 组翻译问题 - 单位错误？

Question

首先我对 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 检查器来测量红色组的高度，它是 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 个像素去哪了？

Answer 1

您缺少的概念是 SVG 组元素 (<g>) 没有尺寸。 （它们不像 HTML <div> 元素。）因此在组元素上定义的转换只是级联到任何具有大小的元素。为简单起见忽略轴和标签，“底部”图中的“最顶部”元素是条形：

<rect x="237.36726634488812" y="4" height="15" width="6.529179464677469"></rect>

<rect> 实际上是在垂直方向平移了 122 个像素，您可以在屏幕截图中进行测量。 （然后以 4 像素的 y 值定位。）