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 或我不知道的标记。

有没有人有任何想法？

更新 今天早上我截取了一些屏幕截图并测量了框的像素值。正如getBBox我使用过的各种浏览器检查器所建议的那样，蓝色框确实是 121 像素高。然后我测量了偏移量，发现应该是 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 个像素，您可以在屏幕截图中进行测量。（然后将其定位为 y 值 4 像素。）