JSFiddle - React, Tailwind, and code Playground

by davidaco

HTML

<body>
    <div id="controls">
        <label for="viewBx">viewbox X:</label>
        <input type="text" id="viewBx" value="0" />
        <br />
        <label for="viewBy">viewbox Y:</label>
        <input type="text" id="viewBy" value="0" />
        <br />
        <label for="viewBWidth">viewbox Width:</label>
        <input type="text" id="viewBWidth" value="600" />
        <br />
        <label for="viewBHeight">viewbox Height:</label>
        <input type="text" id="viewBHeight" value="400" />
        <br />
         <button onclick="applyOrginal()">Original</button>
        <button onclick="applyTest1()">test1</button>
        <button onclick="applyTest2()">test2</button>
        <button onclick="applyTest3()">test3</button>
        <button onclick="applyTest4()">test4</button>
        <button onclick="applyTest5()">test5</button>
        <button onclick="applyTest6()">test6</button>
         <button onclick="applyTest7()">test7</button>
        <button onclick="applyNewViewBox()">Change</button>
    </div>
    <div id="svgView" class="svgView">
        <svg id="mainSVG" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" zoomAndPan="disable">
            <g xmlns="http://www.w3.org/2000/svg" id="glass-pane" pointer-events="all">
                <svg id="testSVG" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet" version="1.1" pointer-events="all" m4:backgroundColor="none">
                    <g id="737e8635-9448-47f4-aada-e1e135b454f2">
                        <image opacity="1.0" x="0" y="0" width="50" height="50" display="inherit" pointer-events="inherit" transform="matrix(1.0 0.0 0.0 1.0 322.1709289550781 213.39491271972656) matrix(1.0 0.0 0.0 1.0 0.0 0.0) matrix(0.461893767118454 0.0 0.0 0.461893767118454 0.0 0.0)"...

CSS

.svgView {
    border-style: solid;
    width:100%;
    height: 600px;
}

JavaScript

function applyNewViewBox() {
    var x = $('#viewBx').val();
    var y = $('#viewBy').val();
    var width = $('#viewBWidth').val();
    var height = $('#viewBHeight').val();
    var testSvg = document.getElementById('testSVG');
    var viewBox = x + " " + y + " " + width + " " + height;
    testSvg.setAttributeNS(null, "viewBox", viewBox);
}

function applyTest(x, y, width, height) {
    $('#viewBx').val(x);
    $('#viewBy').val(y);
    $('#viewBWidth').val(width);
    $('#viewBHeight').val(height);
    var testSvg = document.getElementById('testSVG');
    var viewBox = x + " " + y + " " + width + " " + height;
    testSvg.setAttributeNS(null, "viewBox", viewBox);
}

function applyOrginal() {
    applyTest(0, 0, 600, 400);
}

function applyTest1() {
    applyTest(250, 250, 100, 100);
}

function applyTest2() {
    applyTest(300, 210, 50, 50);
}

function applyTest3() {
    applyTest(315, 225, 10, 10);
}

function applyTest4() {
    applyTest(321.9, 228, 1, 1);
}

function applyTest5() {
    applyTest(322.5, 228, 0.5, 0.5);
}

function applyTest6() {
    applyTest(322.681, 228.138, 0.037, 0.0235);
}

function applyTest7() {
     applyTest(322.681, 228.138, 0.0218, 0.0131);
}