JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<div id="arrowdiv" style="position:absolute;top:0;left:0;visibility:hidden;z-index:5">
</div>

<div id="menu1" onclick="clickMenu()" class="hlMenu">
</div>

<object fakewidth="100%" fakeheight="100%" id="SVGViewer1" data="svg_36.svg" type="image/svg+xml" viewastext="">
	<div id="RasterDiv">
<center>
  <img id="ConvertedImage" src="png_36.png" alt="circulation" name="RasterImage" border="0" usemap="#visImageMap">
</center>

<map name="visImageMap">
  <area shape="POLYGON" tabindex="1" alt="14.1" origtitle="14.1" title="14.1" href="svg_287.htm" target="frmDrawing" coords="151,409,174,409,174,398,151,398,151,409" onmouseover="UpdateTooltip(this,33,338,event)" onfocus="UpdateTooltip(this,33,338,event)" onclick="return OnShapeClick(33,338,event);" onkeyup="OnShapeKey(33,338,event);">
  <area shape="POLYGON" tabindex="1" alt="4.4" origtitle="4.4" title="4.4" target="_top" coords="117,175,136,175,136,163,117,163,117,175" onmouseover="UpdateTooltip(this,33,332,event)" onfocus="UpdateTooltip(this,33,332,event)" onclick="return OnShapeClick(33,332,event);" onkeyup="OnShapeKey(33,332,event);">
  <area shape="POLYGON" tabindex="1" alt="6.10" origtitle="6.10" title="6.10" target="_top" coords="208,205,231,205,231,194,208,194,208,205" onmouseover="UpdateTooltip(this,33,322,event)" onfocus="UpdateTooltip(this,33,322,event)" onclick="return OnShapeClick(33,322,event);" onkeyup="OnShapeKey(33,322,event);">
  <area shape="POLYGON" tabindex="1" alt="6.9" origtitle="6.9" title="6.9" target="_top" coords="189,175,208,175,208,163,189,163,189,175" onmouseover="UpdateTooltip(this,33,317,event)" onfocus="UpdateTooltip(this,33,317,event)" onclick="return OnShapeClick(33,317,event);" onkeyup="OnShapeKey(33,317,event);">
  <area shape="POLYGON" tabindex="1" alt="Tachycardie kind" origtitle="Tachycardie kind" title="Tachycardie kind" href="svg_102.htm" target="frmDrawing"...

CSS

body {
			text-align: center; /* The object is an inline-block element, so we need to center it as text */
			margin: 0; 			/* No margins, since they add to the width */
			padding: 5px;
		}

		/* Elements generated by Visio export that we don't need */
		#menu1, #arrowdiv {
			display: none;
		}

		/* All hacks to enforce sizing. Combined with  */
		svg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		/* Use the full width of the parent. */
		#svgViewer1 {
			margin: 0 auto; /* alignment fallback */
			width: 100%;
			display: block;
			height: auto;
			position: relative;
		}

		@media screen and (orientation:portrait) {
			.tablet.contentwidth #svgViewer1 {
				height: 100%;
			}
		}
		@media screen and (orientation:landscape) {
		}

JavaScript

function djsLog( msg ) {
			try {
				document.body.appendChild( document.createElement( 'div' ).appendChild( document.createTextNode( msg ) ) );
			} catch(e) {
			}
		}
		//djsLog( '1' );
		window.addEventListener( "load", function() {
			//djsLog( '2' );
			var object = document.getElementById("SVGViewer1");
			if ( object) {

				function objectReady() {
					//djsLog( '3' );
					var svgDoc = object.contentDocument;
					if( svgDoc ) {
						//djsLog( '4' );
						//svgDoc.addEventListener( "load", function () {
							//djsLog( '5' );
							var svgRoot = svgDoc.getElementsByTagNameNS("http://www.w3.org/2000/svg","svg")[0];
							if( svgRoot ) {
								//djsLog( '6');
								svgRoot.setAttribute("preserveAspectRatio", "xMidYMin meet");
							}
						//} );
					}
				};
				objectReady();
				object.onload = objectReady;
			}
		} );