JSFiddle - React, Tailwind, and code Playground

by chad_888

HTML

<div id="SVG_canvas" width="93mm" height="53mm">

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>

    <svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="93mm" height="53mm">
        <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234"/>
        <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" />
        <g id="square">
            <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" />
        </g>
        <use xlink:href="#square" transform="scale(2)"/>
        <text x="20" y="55" font-family="Verdana" font-size="43pt" id="hello">Hello World!</text>
        <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text>
    </svg>

</div>

<div id="SVG_canvas1" width="93mm" height="53mm">

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>

    <svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="93mm" height="53mm">
        <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234"/>
        <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" />
        <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text>
    </svg>


</div>

<div id="buttons"> <button id="front" class="btn btn-warning">Лицевая сторона</button> <button id="rear" class="btn btn-warning">Обратная сторона</button> </div>

JavaScript

$(document).ready(function()
                   { 
                       $('#SVG_canvas1').hide();
                       $("#front").click(function(){ $('#SVG_canvas1').hide();$('#SVG_canvas').show();});
                       $("#rear").click(function(){ $('#SVG_canvas').hide();$('#SVG_canvas1').show();});
                   });