javascript – SVG Group翻译问题 – 错误的单位？

2019年8月5日 164次阅读

首先我对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像素：

所以用于翻译蓝色组的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>元素.)因此,在组元素上定义的变换只是级联到任何具有大小的元素.为简单起见,忽略轴和标签,“底部”图形中的“最顶层”元素是条形图：

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

那< rect>确实,在垂直方向上转换了122个像素,您可以在屏幕截图中进行测量. (然后定位y值为4像素.)

点赞