JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="100%" viewBox="0 0 800 100">
	<rect width="100%" height="100%" fill="none" stroke="blue" />
    <text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30" >Only the part inside the viewBox should be visible</text>
</svg>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}