SVG Group 翻译问题 - 单位错误？
SVG Group Translation Issue - Wrong Units?
首先，我对 SVG 有点陌生。我刚刚开始为我所在地区支持的 产品 设计甘特图样式 timeline/roadmap。每个项目都有一个类别和子类别，然后是多个版本。每个产品最终都有自己独立的迷你图表。 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 个像素去哪儿了？
您缺少的概念是 SVG 组元素 (<g>) 没有维度。 （它们不像 HTML <div> 元素。）因此在组元素上定义的转换简单地级联到任何确实具有大小的元素。为简单起见，忽略坐标轴和标签，"bottom" 图中的 "top-most" 元素是条形：
<rect x="237.36726634488812" y="4" height="15" width="6.529179464677469"></rect>
<rect> 实际上是在垂直方向上平移了 122 个像素，您可以在屏幕截图中对其进行测量。 （然后以 4 像素的 y 值定位。）
首先，我对 SVG 有点陌生。我刚刚开始为我所在地区支持的 产品 设计甘特图样式 timeline/roadmap。每个项目都有一个类别和子类别，然后是多个版本。每个产品最终都有自己独立的迷你图表。 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 个像素去哪儿了？
您缺少的概念是 SVG 组元素 (<g>) 没有维度。 （它们不像 HTML <div> 元素。）因此在组元素上定义的转换简单地级联到任何确实具有大小的元素。为简单起见，忽略坐标轴和标签，"bottom" 图中的 "top-most" 元素是条形：
<rect x="237.36726634488812" y="4" height="15" width="6.529179464677469"></rect>
<rect> 实际上是在垂直方向上平移了 122 个像素，您可以在屏幕截图中对其进行测量。 （然后以 4 像素的 y 值定位。）