How can I ensure that text always appears in an SVG tag, even if it extends beyond the boundaries? Check out this jsfiddle example where you can see how the text gets cut off. Any suggestions on how to fix this?
<div class="chart">
<svg height="300" width="300">
<text y='10' x="96">Blah Blah</text>
</svg>
</div>
text {
font-family: Arial;
font-size: 20px;
font-weight: bold;
fill: #000;
text-align: center;
color: #000;
}
.chart {
box-sizing: border-box;
height: 98%;
width: 100%;
margin-top: 9rem;
}