I am trying to embed exported SVG into a HTML document.
The correct behaviour for a SVG inside of a container with overflow-x: auto; would be to scroll.
It does, but some parts of the SVG are clipped:
Example HTML
<!doctype html>
<html lang="en" style="height: 100dvh; width: 100dvw;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typst SVG Misbehaviour</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
:root, body, main, div, figure {
outline: solid 1px red;
}
</style>
</head>
<body style="height: 100%; width: 100%; display: flex; justify-content: center;">
<main style="display: flex; flex-direction: column; max-width: 40rem; padding: 1rem; gap: 1rem">
The following math should be horizontally scrollable, but parts of it are clipped, noticably the <pre>Lorem Ipsum</pre> prefix.
What follows is the svg rendered from source code embedded into an html figure:
<pre style="overflow-x: auto; margin: 0; padding: 0; white-space: pre;">
#set page(margin: 0cm, height: auto, width: auto)
$
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
$
</pre>
<div style="display: flex; justify-content: center; overflow-x: auto;">
<figure>
<svg ...>...</svg>
</figure>
</div>
</main>
</body>
</html>
I am no web developer, so am at my wits end as to why I am observing this.
You can reproduce by exporting the following typst document
#set page(margin: 0cm, height: auto, width: auto)
$
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
$
to svg and embedding that svg into the html.