Line Break g elements inside SVG - html

Question

This might be fairly simple question but unable to find the answer. I want to line break g element tags inside svg element.
CSS
.container { position: reletive; width: 200px; background: #ccc; }
.container g { display: inline-block; display: inline; }
HTML
<div class="container">
<svg>
<g transform="translate(0, 0)">
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Canada</text>
</g>
<g transform="translate(100, 0)">
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Germany</text>
</g>
<g transform="translate(200, 0)">
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Norway</text>
</g>
<g transform="translate(300, 0)">
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Russia</text>
</g>
<g transform="translate(400, 0)">
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">USA</text>
</g>
</svg>
</div>
Here is the JSFiddle Link

Answer 1

SVG doesn't have a layout model like HTML, each element is painted on top of the previous elements and doesn't affect positioning of other elements.
You could use separate <svg /> elements so the HTML layout model can take control of positioning / wrapping the elements:
.container { width: 200px; background: #ccc; }
.container svg { width:100px; margin:0; display: inline-block; }
<div class="container">
<svg>
<g>
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Canada</text>
</g>
</svg><svg>
<g>
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Germany</text>
</g>
</svg><svg>
<g>
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Norway</text>
</g>
</svg><svg>
<g>
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">Russia</text>
</g>
</svg><svg>
<g>
<rect width="18" height="18"></rect>
<text x="24" y="9" dy=".35em">USA</text>
</g>
</svg>
</div>