First off, I'm a little new to SVG. I just started working on the gantt-ish timeline / roadmap for products supported in my area. Each item has a category and subcategory, followed by several versions. Each product ends as a separate mini-chart. SVG is being created d3.js, however the problem does not seem to be JavaScript related.
SVG example here: http://plnkr.co/edit/ipqZIZODDN4lYKVeLt73
Basically, there are two groups gthat should be stacked on top of each other. In the example, there are red and blue contours, respectively. The blue group should be under the red group. To put the blue group, I measured the height of the red group using getBBox. Then I use this height and attribute transformin the blue group.
Here are the relevant groups:
<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>
Note: these groups are contained in several other groups, however, no transformations (except translate(0,0)) apply to these groups.
In the example, if you use a chrome controller to measure the height of the red group, this is 121 pixels:
Thus, 122 used for translatefor the blue group must be accurate. However, when rendering, the red and blue groups overlap significantly:
, , 143 : transform="translate(0,143)", , :
? , 122 122 , . IE11, - SVG , .
- ?
. 121 , getBBox, , . , , 122- , 100 . , ( 143 ), 121 :
IE11, IE11-Edge (Spartan), Chrome 40 Firefox 36. , , ? , 22 ?