JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" 
height="300">
<g id="view" transform="translate(00,00)">
<g style="stroke:#333333; z-index: 180; stroke-width: 0.2px" >
	<line id="horinzotalLine" xmlns="http://www.w3.org/2000/svg" x1="150" y1="-1042" x2="150" y2="1000" />
	<line id="verticalLine" xmlns="http://www.w3.org/2000/svg" x1="0" y1="150" x2="300" y2="150" />

</g>
  <g id="viewport" >
	<line xmlns="http://www.w3.org/2000/svg" x1="150" y1="-8048" x2="150" y2="1000" 
	style="stroke:#0099FF; z-index: 150; stroke-width: 2px" stroke-dasharray="12.4,1,0.6,1,12.4,1,0.6,1" />
	
		<g  id="" style="font-family: Times New Roman; font-size: 10; fill: #999999;
">
		
		<text x="156" y="-1040">80</text>
		<text x="156" y="-1025">79</text>
		<text x="156" y="-1010">78</text>
		<text x="156" y="-995">77</text>
		<text x="156" y="-980">76</text>
		<text x="156" y="-965">75</text>
		<text x="156" y="-950">74</text>
		<text x="156" y="-935">73</text>
		<text x="156" y="-920">72</text>
		<text x="156" y="-905">71</text>
		<text x="156" y="-890">70</text>
		<text x="156" y="-875">69</text>
		<text x="156" y="-860">68</text>
		<text x="156" y="-845">67</text>
		<text x="156" y="-830">66</text>
		<text x="156" y="-815">65</text>
		<text x="156" y="-800">64</text>
		<text x="156" y="-785">63</text>
		<text x="156" y="-770">62</text>
		<text x="156" y="-755">61</text>
		<text x="156" y="-740">60</text>
		<text x="156" y="-725">59</text>
		<text x="156" y="-710">58</text>
		<text x="156" y="-695">57</text>
		<text x="156" y="-680">56</text>
		<text x="156" y="-665">55</text>
		<text x="156" y="-650">54</text>
		<text x="156" y="-635">53</text>
		<text x="156" y="-620">52</text>
		<text x="156" y="-605">51</text>
		<text x="156" y="-590">50</text>
		<text x="156"...

JavaScript

"use strict";

/// CONFIGURATION 
/// ====>

var enablePan = 1; // 1 or 0: enable or disable panning (default enabled)
var enableZoom = 1; // 1 or 0: enable or disable zooming (default enabled)
var enableDrag = 0; // 1 or 0: enable or disable dragging (default disabled)
var zoomScale = 0.2; // Zoom sensitivity

/// <====
/// END OF CONFIGURATION 

var root = document.querySelector('svg');

var state = 'none', svgRoot = null, stateTarget, stateOrigin, stateTf;

setupHandlers(root);

/**
 * Register handlers
 */
function setupHandlers(root){
	setAttributes(root, {
		"onmouseup" : "handleMouseUp(evt)",
		"onmousedown" : "handleMouseDown(evt)",
		"onmousemove" : "handleMouseMove(evt); onmousemover()",
		//"onmouseout" : "handleMouseUp(evt)", // Decomment this to stop the pan functionality when dragging out of the SVG element
	});

	if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
		window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
	else
		window.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
}

/**
 * Retrieves the root element for SVG manipulation. The element is then cached into the svgRoot global variable.
 */
function getRoot(root) {
	if(svgRoot == null) {
		var r = root.getElementById("viewport") ? root.getElementById("viewport") : root.documentElement, t = r;

		while(t != root) {
			if(t.getAttribute("viewBox")) {
				setCTM(r, t.getCTM());

				t.removeAttribute("viewBox");
			}

			t = t.parentNode;
		}

		svgRoot = r;
	}

	return svgRoot;
}

/**
 * Instance an SVGPoint object with given event coordinates.
 */
function getEventPoint(evt) {
	var p = root.createSVGPoint();

	p.x = evt.clientX;
	p.y = evt.clientY;

	return p;
}

/**
 * Sets the current transform matrix of an element.
 */
function setCTM(element, matrix) {
	var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";

	element.setAttribute("transform", s);
}

/**
 *...