svg text-fit

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>

Add a comment

Previous Post