JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <svg id="not_working" viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet" width="200" height="200">
        <symbol id="test_symbol1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 250 1200">
            <path id="test_symbol_path" d="M 100 1200 L 100 0" stroke="red"/>
            <text font-size="100" fill="red">
                <textPath text-anchor="middle" startOffset="50%" xlink:href="#test_symbol_path">Test</textPath>
            </text>
        </symbol>
        <use xlink:href="#test_symbol1"/>
    </svg>
    
    <svg viewBox="0 0 250 1200" preserveAspectRatio="xMidYMid meet" width="200" height="200">
        <path id="test_text" d="M 100 1200 L 100 0" stroke="green"/>
        <text font-size="100" fill="green">
            <textPath text-anchor="middle" startOffset="50%" xlink:href="#test_text">Test</textPath>
        </text>
    </svg>
</div>

CSS

svg {
    border: 1px solid black;
}