SVG responsive and introspective component for Svelte

I'm trying to display a SVG component for Svelte, which knows about its viewBox and dimensions, in a responsive way.

So, with this markup:

# src/components/Viz.svelte
<svg class="viz"
    viewBox={ ... }
    width={ ... }
    height={ ... }>
    
    <text x="0" y="-10"> { width } * { heigth }</text>
    <text x="0" y="10">  { viewBox }</text>
</svg>

Of course the App.svelte has to adapt and fit the whole viewport heght, and contains additional markup:

# src/App.svelte
<script>
    $: console.log({ innerWidth, innerHeight })
</script>
<svelte:window
    bind:innerWidth
    bind:innerHeight
/>
<!-- main fits page at 100% height... -->
<main>
    <header> ... </header>
    <article> <Viz /> </article>
    <footer> ... </footer>
</main>

The problem are:

values in console.log lend to be undefined at startup at $-cycle 0, and then have a defined value;
that causes a flashing/blinking effect on the SVG canvas at startup
and the worst: texts don't appear at all inside SVG, and Mozilla Tools doesn't "see" and mark them when inspecting the page

How to fix that ? Should I deal with onMount Svelte handler, or stores?

SVG responsive and introspective component for Svelte

0 Answers