JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
	xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="0 0 10000 11000" preserveAspectRatio="xMidYMid" xml:space="preserve"
	zoomAndPan="magnify" onload="" >
<desc>
Test of dashed lines and non-scaling stroke effects with scaling
</desc>


<g transform=" translate(-500,-5800) scale(1,1) translate(500,5800)  translate(-200,-2000)" >
	<text x="400" y="5400"  font-size="300">Scale 1,1</text>

<g fill="none" stroke="black" stroke-width="8">
    <text x="500" y="5700" font-size="300" >Normal Stroke</text>
    <path stroke-dasharray="50,50" d="M 500 5800 l 4150 0" />
    <path stroke-dasharray="100,100" d="M 500 6000 l 4150 0" />
    <path stroke-dasharray="200,100,50,50,50,100" d="M 500 6200 l 4150 0" />
  </g>

<g fill="none" stroke="black" stroke-width="8">
    <text x="500" y="7200" font-size="300" >vector-effect="non-scaling-stroke"</text>
    <path vector-effect="non-scaling-stroke"  stroke-dasharray="50,50" d="M 500 7400 l 4150 0" />
    <path vector-effect="non-scaling-stroke"  stroke-dasharray="100,100" d="M 500 7600 l 4150 0" />
    <path vector-effect="non-scaling-stroke"  stroke-dasharray="200,100,50,50,50,100" d="M 500 7800 l 4150 0" />
 
</g>
</g>


<g transform=" translate(-400,-5400) scale(0.5,0.5) translate(400,5400) translate(200,2000)" >
	<text x="400" y="5400"  font-size="300">Scaled Down</text>

<g fill="none" stroke="black" stroke-width="8">
    <text x="500" y="5700" font-size="300" >Normal Stroke Scaled</text>
    <path stroke-dasharray="50,50" d="M 500 5800 l 4150 0" />
    <path stroke-dasharray="100,100" d="M 500 6000 l 4150 0" />
    <path stroke-dasharray="200,100,50,50,50,100" d="M 500 6200 l 4150 0" />
  </g>

<g fill="none" stroke="black" stroke-width="8">
    <text x="500" y="7200" font-size="300" >vector-effect="non-scaling-stroke",...