Dynamically resizing text to fit a path so text does not get clipped

Im trying to dynamically size text so that it can fit to a path without letters being chopped off. Right now this is what happens:

Chopped happy birthday

The svg currently looks like:

<defs>
    <path id="eventPath" d="M49.2,200c20.5-16.4,92.9-70,200-
    70c26.3,0,116.3,3.2,200,70"/>
    <path id="namePath" d="M49.2,380c20.5,16.4,92.9,70,200,70c26.3,0,116.3-
    3.2,200-70 "/>
</defs>

<text id="event" text-anchor="middle" class="st0 st1">
    <textPath id="ep" xlink:href="#eventPath" startOffset="50%">
        {{event}}
    </textPath>
</text>
<script type="text/javascript">
    var textPath = document.getElementById("ep");
    var tpLength = textPath.getBBox();
    var path = document.getElementById("event");
    var pLength = path.getBBox();
    var fontSize = 65;
    while (tpLength.width > pLength.width) {
        fontSize -= 0.1;
        textPath.setAttribute("font-size", fontSize);
    }
</script>

Ive also tried using getComputedTextLenght() and getTotalLength(), but those didnt seem to work either. Any suggestions?