(this response is assuming you have brought these over from Symbol Factory, which it appears you have)
As @pturmel suggested, the problem you’re encountering is that the individual pieces a re attempting to preserve their aspect ratio, which means that they well position themselves and scale according to the setting you have selected for them which by default is
xMidYMid. This setting will preserve the aspect ratio of the symbol while using the smaller restrictive boundary as the “max” and the center of the component (mid/mid) as the center of the symbol.
In your video example, if you want the pieces to all remain connected while the screen size changes, you will need to set
props.preserveAspectRatio to a value of
none. The trade-off in removing the preservation of aspect ratio to maintain positional relevance is that the symbols will begin to stretch.
The “gaps” between my symbols are due to rounding differences while having symbols directly at one another’s edge. You should consider a bit of overlap to avoid these rounding errors.