JSFiddle - React, Tailwind, and code Playground

by hhcofcmds

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<RESULTS>
	<ROW>
		<COLUMN NAME="AJTO_SZAMA"><![CDATA[NINCS]]></COLUMN>
		<COLUMN NAME="FES_KOD"><![CDATA[F00689]]></COLUMN>
		<COLUMN NAME="EPULET_MEGNEVEZESE"><![CDATA[]]></COLUMN>
		<COLUMN NAME="GEOM"><![CDATA[MDSYS.SDO_GEOMETRY(2003,NULL,NULL,MDSYS.SDO_ELEM_INFO_ARRAY(1,1003,1),MDSYS.SDO_ORDINATE_ARRAY(79.9643058842611,29.8261018497066,79.9643058842611,26.7750348497066,81.2990648842611,26.7750348497066,81.2990648842611,29.8261018497066,79.9643058842611,29.8261018497066))]]></COLUMN>
	</ROW>
	<ROW>
		<COLUMN NAME="AJTO_SZAMA"><![CDATA[A5.46]]></COLUMN>
		<COLUMN NAME="FES_KOD"><![CDATA[F00675]]></COLUMN>
		<COLUMN NAME="EPULET_MEGNEVEZESE"><![CDATA[]]></COLUMN>
		<COLUMN NAME="GEOM"><![CDATA[MDSYS.SDO_GEOMETRY(2003,NULL,NULL,MDSYS.SDO_ELEM_INFO_ARRAY(1,1003,1),MDSYS.SDO_ORDINATE_ARRAY(39.6380398842611,12.4391228497066,39.6380399728703,14.9141228497066,37.997745618717,14.9141228497066,37.9977458842611,12.8941228497066,38.5227458842611,12.8941228497066,38.5227458842611,12.4391228497066,39.6380398842611,12.4391228497066))]]></COLUMN>
	</ROW>
	<ROW>
		<COLUMN NAME="AJTO_SZAMA"><![CDATA[A5.43]]></COLUMN>
		<COLUMN NAME="FES_KOD"><![CDATA[F00665]]></COLUMN>
		<COLUMN NAME="EPULET_MEGNEVEZESE"><![CDATA[]]></COLUMN>
		<COLUMN NAME="GEOM"><![CDATA[MDSYS.SDO_GEOMETRY(2003,NULL,NULL,MDSYS.SDO_ELEM_INFO_ARRAY(1,1003,1),MDSYS.SDO_ORDINATE_ARRAY(18.3977456187172,12.958556867632,18.3977456187171,10.8391228497066,20.2797307732065,10.8391228497066,20.6833432719262,11.9701483218372,20.5400278457066,12.0227082554904,19.6571384052832,12.3734307041428,19.2163122548165,12.5665220016165,18.8048675229688,12.7580264145455,18.3977456187172,12.958556867632))]]></COLUMN>
	</ROW>
	<ROW>
		<COLUMN NAME="AJTO_SZAMA"><![CDATA[A5.64]]></COLUMN>
		<COLUMN NAME="FES_KOD"><![CDATA[F00682]]></COLUMN>
		<COLUMN NAME="EPULET_MEGNEVEZESE"><![CDATA[]]></COLUMN>
		<COLUMN...

JavaScript

var paper = new Raphael(0,0, 768,768);
var startkey="SDO_ORDINATE_ARRAY(";
$("column[name='GEOM']").each(function (key,value) {
    var cdata = $(value).html();
    var coords = cdata.substring(cdata.indexOf(startkey) + startkey.length);
    coords = coords.substring(0, coords.length - 7);
    var coordsArray = eval("[" + coords + "]");
    var svgPath = "M" + coordsArray[0] + "," + coordsArray[1];
    for (var i = 2; i < coordsArray.length; i += 2) {
        svgPath += "L" + coordsArray[i] + "," + coordsArray[i+1];
    }
    var path = paper.path(svgPath);
    path.click(function () {
        if (this.scaled === true) {
            this.scale(1/3,1/3);
            this.scaled = false;
        } else {
            this.scale(3,3);
            this.scaled = true;
            this.toFront();
        }
    });
    path.scale(12,12,0,0);
    path.attr("fill","#fed");
});