Gehen wir mal davon aus wir haben ein SVG und passen den Text in diesem SVG dynamisch an.
Man gebe dem Text ein Data-Attribute data-textfit mit der maxmimalen möglichen Breite mit, eine initialte Text-Größe -> Fertig :-)
Jetzt den Text-Anpassen die TextFit-Funkton aufrufen und das der Text passt genau rein :-)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>
</title>
<script>
function textfit(){
let textFits = document.querySelectorAll('svg text[data-textfit]');
let fitted = 0;
textFits.forEach(textFit => {
let startFontSize = textFit.getAttribute('font-size');
let cTextFit = textFit.getAttribute('data-textfit');
let cWidth = textFit.getBBox().width;
if (cWidth > cTextFit){
fitted++;
textFit.style.letterSpacing = '-0.05em';
let cWidth = textFit.getBBox().width;
let newFontSize = Math.floor(startFontSize * cTextFit/cWidth);
textFit.style.fontSize = newFontSize;
}
})
return fitted
}
</script>
</meta>
</head>
<body style="background:red">
<svg fill="none" height="1080" viewbox="0 0 1920 1080" width="1920" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="black" height="1080" width="1920">
</rect>
<g clip-path="url(#clip0)" id="Slide 16:9 - 1">
<text data-textfit="1050" fill="white" font-family="Open Sans" font-size="72" id="textlayer" letter-spacing="0em" style="white-space: pre;background:pink;" xml:space="preserve">
<tspan x="299" y="950.932">
Some Freaking lonk Text that does not fit into 1920x1080
</tspan>
</text>
</g>
</svg>
<script>
console.log(textfit()+ ' svgs-text(s) fitted')
</script>
</body>
</html>