Examples / Text

CSS variable font size

The font size and line height are being used to position multiline text in SVG. You can also use CSS variables to set the font size (currently only in px and rem).

SveltePlotis great 
<Plot axes={false}>
    <Frame borderRadius={20} strokeOpacity={0.25} />
    <Text
        fontSize="var(--my-font-size)"
        fill="var(--svp-accent)"
        fontWeight="bold"
        text={`SveltePlot\nis great`} />
</Plot>

<style>
    :root {
        --my-font-size: 3rem;
        @media screen and (max-width: 600px) {
            --my-font-size: 27px;
        }
    }
</style>

Open in Svelte playground

Last update at: 2025/07/08 15:29:07