I inserted some elements into an SVG with one large group. The basic code for the group is as follows:
<svg ng-attr-view-box="{{getViewbox()}}"
width="100%" height="100%">
<!-- This will be the global group element I reference below -->
<g ng-transclude></g>
</svg>
Right after the page loads, it requests a list of elements (actually several lists) to display and then adds them to the page. Each element looks something like this:
<g class="element-view">
<circle ng-attr-cx="{{model.x}}"
ng-attr-cy="{{model.y}}"
style="fill:blue"
r="4">
</circle>
<path ng-attr-d="....">
</path>
</g>
In Chrome, sometimes the upper group has zero size despite all elements being correctly loaded and added to the DOM. And nothing is displayed. The second list of elements is not displayed at all, but all the elements are in place, and all <g> elements of the second list also have a size of zero despite child SVG tags properly set with coordinates and sizes.
In Firefox, the global group size is always zero.
Does anyone know why browsers do not set the proper size of the <g> element?
P.S. My guess is that the reason for this could be that the parent element or SVG view-box is initially set to zero and then to some value during the layout setup, and for some reason, the <g> element is not resized afterward. But I'm unsure how to debug this.