g element rendering outside of svg - html

Question

I have a bar chart I've created using D3. I've left out the JS code because the issue has to do with html and css not D3.
Run the snippet below. There are 3 sections (g elements) each with a label and 3 bars (with some text inside). The first g element seems to be rendering outside the svg, cutting off the label text, and I cannot figure out why.
Things I've already tried (that don't work):
Position relative on the svg and g elements.
overflow: visible (would be more of a hack than a solution)
wrapping the svg in a clearfix div
I would prefer a solution, opposed to a hack like translate the g elements down by 20 each...
#chart{ width:100%;}
#chart rect {
fill: steelblue;
}
#chart text.value {
fill: white;
font-size: 10px;
text-anchor: end;
}
#chart text.value2 {
fill: white;
font-size: 12px;
}
#chart text.label {
fill: black;
font-size: 20px;
}
<svg id="chart" width="908" height="375">
<g transform="translate(0,0)">
<text class="label" x="0" y="0">test 1</text>
<rect x="0" y="10" width="314.3076923076923" height="25"></rect>
<text class="value" x="309.3076923076923" y="22.5" dy=".35em">25</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="440.03076923076924" height="25"></rect>
<text class="value" x="435.03076923076924" y="50.5" dy=".35em">35</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="326.88000000000005" height="25"></rect>
<text class="value" x="321.88000000000005" y="78.5" dy=".35em">26</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
<g transform="translate(0,119)">
<text class="label" x="0" y="0">test 2</text>
<rect x="0" y="10" width="377.1692307692308" height="25"></rect>
<text class="value" x="372.1692307692308" y="22.5" dy=".35em">30</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="502.8923076923077" height="25"></rect>
<text class="value" x="497.8923076923077" y="50.5" dy=".35em">40</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="628.6153846153846" height="25"></rect>
<text class="value" x="623.6153846153846" y="78.5" dy=".35em">50</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
<g transform="translate(0,238)">
<text class="label" x="0" y="0">test 3</text>
<rect x="0" y="10" width="565.7538461538462" height="25"></rect>
<text class="value" x="560.7538461538462" y="22.5" dy=".35em">45</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="817.2" height="25"></rect>
<text class="value" x="812.2" y="50.5" dy=".35em">65</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="477.7476923076924" height="25"></rect>
<text class="value" x="472.7476923076924" y="78.5" dy=".35em">38</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
</svg>

Answer 1

The text.label elements "baseline" is, by default, at the bottom edge of the text. Meaning, when you render text at (0,0), the text is rendered from the bottom left corner.
To fix your issue, you can add dominant-baseline: hanging; to the text.label rule in your CSS, and adjust the bars down by the height of the text.