<?php
// SVG_Primer.php
// Draw SVG elemnts
// RJM Programming
// December, 2016
// Features a colour picker ... perhaps via HTML(5) input type=color 

 $prepre='';
 $hp1="";
 $gbefore="";
 $gafter="";
 $previous="";
 if (isset($_GET['alreadythere'])) {
   $previous = str_replace("+"," ",$_GET['alreadythere']);
 } else if (isset($_POST['alreadythere'])) {
   $previous = str_replace("+"," ",$_POST['alreadythere']);
 }
 $rotateappend="";
 $rotate="";
 if (isset($_GET['rotate'])) {
   $rotate = str_replace("+"," ",$_GET['rotate']);
 } else if (isset($_POST['rotate'])) {
   $rotate = str_replace("+"," ",$_POST['rotate']);
 }
 $translate="";
 if (isset($_GET['translate'])) {
   $translate = str_replace("+"," ",$_GET['translate']);
 } else if (isset($_POST['translate'])) {
   $translate = str_replace("+"," ",$_POST['translate']);
 }
 $skewx="";
 if (isset($_GET['skewx'])) {
   $skewx = str_replace("+"," ",$_GET['skewx']);
 } else if (isset($_POST['skewx'])) {
   $skewx = str_replace("+"," ",$_POST['skewx']);
 }
 $skewy="";
 if (isset($_GET['skewy'])) {
   $skewy = str_replace("+"," ",$_GET['skewy']);
 } else if (isset($_POST['skewy'])) {
   $skewy = str_replace("+"," ",$_POST['skewy']);
 }
 $matrix="";
 if (isset($_GET['matrix'])) {
   $matrix = str_replace("+"," ",$_GET['matrix']);
 } else if (isset($_POST['matrix'])) {
   $matrix = str_replace("+"," ",$_POST['matrix']);
 }
 $torder="";
 if (isset($_GET['torder'])) {
   $torder = str_replace("+"," ",$_GET['torder']);
 } else if (isset($_POST['torder'])) {
   $torder = str_replace("+"," ",$_POST['torder']);
 }
 if (strpos(($rotate . "~"),".01~") !== false) {
   $rotateappend=".01";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".02~") !== false) {
   $rotateappend=".02";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".03~") !== false) {
   $rotateappend=".03";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".04~") !== false) {
   $rotateappend=".04";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".05~") !== false) {
   $rotateappend=".05";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".06~") !== false) {
   $rotateappend=".06";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".07~") !== false) {
   $rotateappend=".07";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".08~") !== false) {
   $rotateappend=".08";
   $rotate=str_replace($rotateappend,"",$rotate);
 } else if (strpos(($rotate . "~"),".09~") !== false) {
   $rotateappend=".09";
   $rotate=str_replace($rotateappend,"",$rotate);
 }
 $ris=255;
 $gis=0;
 $bis=0;
 $iurl = "";
 $what = "";
 if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else if (isset($_POST['what'])) {
   $what = $_POST['what'];
 }
 $mode = "GET";
 $p1 = "";
 $p2 = "";
 $p3 = "";
 $p4 = "";
 $p5 = "";
 $p6 = "";
 $p7 = "";
 $p8 = "";
 $p9 = "";
 $p10 = "";


 $p11 = "";
 $p12 = "";
 $p13 = "";
 $p14 = "";
 $p15 = "";
 $p16 = "";
 $p17 = "";
 $p18 = "";
 $p19 = "";
 $p20 = "";
 
function notprevious($inad) {
  global $previous;
  if ($previous != "") {
    return str_replace($previous . $previous, $previous, $inad);
  }
  return $inad;
}

function server_remote_addr() {
    $rma = $_SERVER['REMOTE_ADDR'];
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    // you can add different browsers with the same way ..
    if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
            $rma = '000000'.$rma;
    elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
            $rma = '00000'.$rma;
    elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
            $rma = '0000'.$rma;
    elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
            $rma = '000'.$rma;
    elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
            $rma = '00'.$rma;
    elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
            $rma = '0'.$rma;
    return $rma;
}

function stuffaround($aniname) {
 $istuff = "";
 $huh="?huh=" . rand(0,32674);
 if ($aniname != "") {
   $istuff='&nbsp&nbsp;<script type="text/javascript"> function ath() { window.open("' . $aniname . $huh . '","' . $aniname . $huh . '","top=100,left=100,width=300,height=300"); } setTimeout(ath,1000); </script>';
 }
 return $istuff;
}


function fmc($im, $incol) {
    $coltoget=str_replace(" ", "", str_replace(" ", "", strtolower(urldecode($incol))));
    if (file_exists("ideasfrom.txt")) {
      $vers=strtolower(file_get_contents("ideasfrom.txt"));
      //$versus=explode("<table>", $vers);
    //file_put_contents("ideasfrom.yyy", "<td>" . $coltoget . "</td> ?in? " . $versus);
      if (strpos($vers, "<td>" . $coltoget . "</td>") !== false) {
    //file_put_contents("ideasfrom.zzz", $_GET['findmecolour']);
        $rest=explode("<td>" . $coltoget . "</td>", $vers); //us[1]);
        $andthen=explode("</td>", $rest[1]);
        $r_g_b=explode("&#160;", str_replace("<td><code>", "", str_replace("</code>", "", str_replace("\n", "", $andthen[0]))));
        $xris=strval(hexdec($r_g_b[0]));
        $xgis=strval(hexdec($r_g_b[1]));
        $xbis=strval(hexdec($r_g_b[2]));
    //file_put_contents("ideasfrom.www", $xris . " " . $xgis . " " . $xbis);
        return imagecolorallocate($im, $xris, $xgis, $xbis);
      }
    }
    return null;
}

function arrdo() {
    $arrb = "\n var arrb=['pink','#ffc0cb'";
    if (file_exists("ideasfrom.txt")) {
      $vers=strtolower(file_get_contents("ideasfrom.txt"));
      $codetds=explode("</code></td>", $vers);
      for ($ik=2; $ik<(-1 + sizeof($codetds)); $ik+=2) {
        $names=explode("</td>", str_replace("<td>","</td>",$codetds[0 + $ik]));
        $r_g_b=explode("&#160;", str_replace("<td><code>", "", str_replace("</code>", "", str_replace("\n", "",$codetds[$ik]))));
        $arrb .= str_replace("\n","","," . "'" . $names[-3 + sizeof($names)] . "','#" . substr(("0" . $r_g_b[0]), (strlen($r_g_b[0]) - 1)) . substr(("0" . $r_g_b[1]), (strlen($r_g_b[1]) - 1)) . substr(("0" . $r_g_b[2]), (strlen($r_g_b[2]) - 1))) . "'\n";   
      }
    }
    $arrb .= "]; \n";
    return $arrb;
}

function reorderar($gin) {
 global $torder, $translate;
 $outgin=$gin;
 $outg="";
 if ($torder != "" && strpos($gin, "transform=") !== false) {
   $outg=explode("transform=", $gin)[0] . 'transform=';
   $bits=explode(",",str_replace(($torder . "~"), ",~", $torder));
   if (sizeof($bits) > 1) {
     $subgin="";
     $dsubgin="";
     for ($ii=0; $ii<sizeof($bits); $ii++) {
      if (trim($bits[$ii]) != "") { 
       $subgin.=$dsubgin . $bits[$ii] . explode(")", explode($bits[$ii], $gin)[1])[0] . ")";
       $dsubgin=" ";
      }
     }
   }
   if (strpos($gin, "transform='") !== false) {
     $outg=explode("'", explode("transform='", $gin)[1])[0];
     $outgin=str_replace($outg, $subgin, $gin);
   } else if (strpos($gin, 'transform="') !== false) {
     $outg=explode('"', explode('transform="', $gin)[1])[0];
     $outgin=str_replace($outg, $subgin, $gin);
   } else {
     $outg=explode(">", explode('transform=', $gin)[1])[0];
     $outgin=str_replace($outg, $subgin, $gin);
   }
 }
 return $outgin;
}

function saveit($drawwhat) {
 global $hp1,$p1,$p2,$p3,$p4,$p5,$p6,$p7,$p8,$p9,$p10,$p11,$p12,$p13,$p14,$p15,$p16,$p17,$p18,$p19,$p20,$prepre,$previous,$gbefore,$gafter,$rotate,$rotateappend,$translate,$matrix,$skewx,$skewy,$torder;
 $imgname="";
    //file_put_contents("ideasfrom.zzz", "0 " . $drawwhat);
 if ($drawwhat == "Text") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor($p1, $p1); 
   $ourp5=fmc($iois, $p4);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagestring($iois, 3, $p1, $p2, $p3, $p4);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Circle") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor($p1, $p1); 
   $ourp5=fmc($iois, $p5);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledarc($iois, $p2, $p3, $p4, $p4, 0, 360, $ourp5, IMG_ARC_PIE);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Rectangle") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max(max($p2,$p3),$p1), max(max($p2,$p3),$p1)); 
   $ourp5=fmc($iois, $p4);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledrectangle($iois, 0, 0, ($p2 + 0), ($p3 + 0), $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Line") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max(max($p2,$p4),$p1), max(max($p3,$p5),$p1)); 
   $ourp5=fmc($iois, $p6);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imageline($iois, $p2, $p3, $p4, $p5, $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Ellipse") {
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
   //if (file_exists($imgname)) unlink($imgname);
   $iois=imagecreatetruecolor(max($p4,$p1), max($p5,$p1)); 
   $ourp5=fmc($iois, $p6);  
   //$ourp5=imagecolorallocate($iois, $ris, $bis, $gis); // vs red
   imagefilledellipse($iois, $p2, $p3, $p4, $p5, $ourp5);
   imagejpeg($iois, $imgname);
   imagedestroy($iois);
   return $imgname;
 } else if ($drawwhat == "Polygon") {
    //file_put_contents("ideasfrom.zzz", "1");
   $imgname="animage_" . str_replace(".", "_", str_replace(":", "_", server_remote_addr())) . ".jpg";
    //file_put_contents("ideasfrom.zzz", "2");
   if (1 == 1) {
   $iois=imagecreatetruecolor(($p1 * 2), $p1); 
    //file_put_contents("ideasfrom.zzz", "3");
   $ourp5=fmc($iois, $p3);  
    //file_put_contents("ideasfrom.zzz", "4");
   //eval(" $arr2=array(" . str_replace(" ", ",", urldecode($p2)) . ");");
   $arr2=explode(",", str_replace(" ", ",", urldecode($p2)));
    //file_put_contents("ideasfrom.zzz", "5");
   imagefilledpolygon($iois, $arr2, (sizeof($arr2) / 2), $ourp5); 
    //file_put_contents("ideasfrom.zzz", "6");
   imagejpeg($iois, $imgname);
    //file_put_contents("ideasfrom.zzz", "7");
   imagedestroy($iois);
    //file_put_contents("ideasfrom.zzz", "8");
   }
   return $imgname;
 } 
 return $imgname;
}

 if ($what == "") {
?>
<!DOCTYPE html>
<head>
<title>SVG Tutorial - RJM Programming - July, 2014 and December, 2016 ... thanks to http://www.tutorialspoint.com/html5/html5_svg.htm</title>
<meta charset="utf-8" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type="text/javascript">

var textis='';

var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var colourpickerhelper='<input id="filler" onchange=" document.getElementById(\'fill\').value=this.value; " type="color" value="#ff0000"></input>';
var colourpickerhelperone='<input id="s1stop-color" onchange=" modify(this.value,\'s1stop-color\'); " type="color" value="#c4c4c4"></input>';
var colourpickerhelpertwo='<input id="s2stop-color" onchange=" modify(this.value,\'s2stop-color\'); " type="color" value="#0000ff"></input>';

<?php echo arrdo(); ?>

function modifyback(one_or_two) {
   var r,g,b;
   r = document.getElementById('s' + one_or_two + 'stop-colorr').value;
   g = document.getElementById('s' + one_or_two + 'stop-colorg').value;
   b = document.getElementById('s' + one_or_two + 'stop-colorb').value;
   document.getElementById('s' + one_or_two + 'stop-color').value ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16))  / 16] + arr[g % 16] + arr[(b-(b % 16))  / 16] + arr[b % 16];
}

function maybetoobig(ins) {
  return ins;
}

function modify(hexin, idprefix) {
 var ival=0;
 var inhex=hexin.toLowerCase().replace('#','');
 ival+=arr.indexOf(inhex.substring(1,2));
 ival+=(16 * arr.indexOf(inhex.substring(0,1)));
 document.getElementById(idprefix + 'r').value=ival;
 ival=0;
 ival+=arr.indexOf(inhex.substring(3,4));
 ival+=(16 * arr.indexOf(inhex.substring(2,3)));
 document.getElementById(idprefix + 'g').value=ival;
 ival=0;
 ival+=arr.indexOf(inhex.substring(5,6));
 ival+=(16 * arr.indexOf(inhex.substring(4,5)));
 document.getElementById(idprefix + 'b').value=ival;
}

function fill_in_theparameters(othis) {
  var hideit=false;
  var odiv = document.getElementById("theparameters");
  var odivcontents = '<br>Height: <input type=number step=any id=height name=height value=200></input><br>';
  if (othis.value == "Text") {
    textis=prompt("Please enter the text you want here.", textis);
    if (textis == null) { textis=""; }
    odivcontents = odivcontents + "<br>Text X: <input type=text id=cx name=cx value='50%'></input><br>";
    odivcontents = odivcontents + "<br>Text Y: <input type=text id=cy name=cy value='50%'></input><br>";
    odivcontents = odivcontents + "<br>Text: <input type=text id=text name=text value='" + textis + "'></input><br>";
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
  } else if (othis.value == "Circle") {
    odivcontents = odivcontents + "<br>Centre X: <input type=number step=any id=cx name=cx value=50></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius: <input type=number step=any id=r name=r value=50></input><br>";
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
  } else if (othis.value == "Rectangle") {
    odivcontents = odivcontents + "<br>Rectangle Width: <input type=number step=any id=w name=w value=300></input><br>";
    odivcontents = odivcontents + "<br>Rectangle Height: <input type=number step=any id=h name=h value=100></input><br>";
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red>" + colourpickerhelper + "</input><br>";
  } else if (othis.value == "Line") {
    odivcontents = odivcontents + "<br>First X: <input type=number step=any id=x1 name=x1 value=0></input><br>";
    odivcontents = odivcontents + "<br>First Y: <input type=number step=any id=y1 name=y1 value=0></input><br>";
    odivcontents = odivcontents + "<br>Last X: <input type=number step=any id=x2 name=x2 value=200></input><br>";
    odivcontents = odivcontents + "<br>Last Y: <input type=number step=any id=y2 name=y2 value=100></input><br>";
    odivcontents = odivcontents + "<br>Stroke Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=stroke value=red>" + colourpickerhelper + "</input><br>";
    odivcontents = odivcontents + '<br>Stroke Width: <input type=number step=any id="stroke-width" name="stroke-width" value=2></input><br>';
  } else if (othis.value == "Ellipse") {
    odivcontents = odivcontents + "<br>Centre X: <input type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius X: <input type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "<br>Radius Y: <input type=number step=any id=ry name=ry value=50></input><br>";
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\" type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
  } else if (othis.value == "Polygon") {
    //hideit=true;
    odivcontents = odivcontents + '<br>Polygon Co-ordinates: <input type=text id=points name=points value="20,10 300,20 170,50"></input><br>';
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
  } else if (othis.value == "Polyline") {  
    hideit=true;
    odivcontents = odivcontents + '<br>Polygon Co-ordinates: <input type=text id=points name=points value="0,0 0,20 20,20 20,40 40,40 40,60"></input><br>';
    odivcontents = odivcontents + "<br>Colour: <input onblur=\"if (this.value.indexOf('#') == 0) { document.getElementById('filler').value=this.value; } else if (arrb.indexOf(this.value.toLowerCase()) != -1) {  document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.toLowerCase())];  } else if (arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase()) != -1) { document.getElementById('filler').value=arrb[1 + arrb.indexOf(this.value.replace(' ','').replace(' ','').toLowerCase())]; this.value=this.value.replace(' ','').replace(' ','');  }\"  type=text id=fill name=fill value=red></input>" + colourpickerhelper + "<br>";
  } else if (othis.value == "Gradient Ellipse") {
    hideit=true;
    odivcontents = "Height: <input type=number step=any id=height name=height value=200></input><br>";
    odivcontents = odivcontents + 'Radial Gradient % Centre X: <input type=text id=rcx name=rcx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Centre Y: <input type=text id=rcy name=rcy value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient Radius %: <input type=text id=rr name=rr value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % X: <input type=text id=rfx name=rfx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Y: <input type=text id=rfy name=rfy value="50%"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Offset %: <input type=text id=s1offset name=s1offset value="0%"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Red 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorr" name="s1stop-colorr" value="200">' + colourpickerhelperone + '</input><br>';
    odivcontents = odivcontents + 'Stop 1 Green 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorg" name="s1stop-colorg" value="200"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Blue 0-&gt;255: <input onblur=" modifyback(1); " type=number step=any id="s1stop-colorb" name="s1stop-colorb" value="200"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Opacity 0.0-&gt;1.0: <input type=number step=any id=s1opacity name=s1opacity value="0"></input><br>';
    odivcontents = odivcontents + 'Stop 2 Offset %: <input type=text id=s2offset name=s2offset value="100%"></input><br>';
    odivcontents = odivcontents + 'Stop 2 Red 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorr" name="s2stop-colorr" value="0"></input>' + colourpickerhelpertwo + '<br>';
    odivcontents = odivcontents + 'Stop 2 Green 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorg" name="s2stop-colorg" value="0"></input><br>';
    odivcontents = odivcontents + 'Stop 2 Blue 0-&gt;255: <input onblur=" modifyback(2); " type=number step=any id="s2stop-colorb" name="s2stop-colorb" value="255"></input><br>';
    odivcontents = odivcontents + 'Stop 2 Opacity 0.0-&gt;1.0: <input type=number step=any id=s2opacity name=s2opacity value="1"></input><br>';
    odivcontents = odivcontents + "Centre X: <input type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "Centre Y: <input type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "Radius X: <input type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "Radius Y: <input type=number step=any id=ry name=ry value=50></input><br>";
  }
  odiv.innerHTML = odivcontents;
  if (hideit) {
    document.getElementById('submitsave').style.display='none';
  } else {
    document.getElementById('submitsave').style.display='inline';
  }
}

</script>
</head>
<body align="center" style="background-color:teal;">
<h1 style="width:100%;text-align:center;">HTML5 SVG Tutorial</h1>
<h4 style="width:100%;text-align:center;">(Optional geometry tracing game as well)</h4>
<br>
<form onsubmit="  return true;" id="svgform" method="POST" action="./SVG_Primer.php" align="center" style="width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<!--input style='display:none;' type='text' value='255' name='r' id='r'></input>
<input style='display:none;' type='text' value='0' name='g' id='g'></input>
<input style='display:none;' type='text' value='0' name='b' id='b'></input-->
<div id="theselect" align="center"><br><select align="center" name="what" id="what" onchange="fill_in_theparameters(this);"><option value=''>Please select a SVG shape to create below ...</option>
<option value='Text'>Text</option>
<option value='Circle'>Circle</option>
<option value='Rectangle'>Rectangle</option>
<option value='Line'>Line</option>
<option value='Ellipse'>Ellipse</option>
<option value='Polygon'>Polygon</option>
<option value='Polyline'>Polyline</option>
<option value='Gradient Ellipse'>Gradient Ellipse</option>
</select>
</div>
<div id="theparameters" align="center">
</div>
<br><div id="thebuttons" align="center"><input onclick="document.getElementById('alreadythere').value=decodeURIComponent(document.getElementById('alreadythere').title);" align="center" type="submit" id=group name=group value="Group and draw shape(s) above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var rv=prompt('Rotation (in integer degrees)?  Default rotation point is centre/centre and you can append by 0.01 through to 0.09 for the other rotation options moving from top/left (would be .01) through to centre/centre (would be .05) through to bottom right (would be .09)',''); if (rv == null) { rv=''; } if (rv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('rotate').value=rv; document.getElementById('torder').value+='rotate(,'; }" align="center" type=button value="Rotate"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var tv=prompt('Translation (x,y)?',''); if (tv == null) { tv=''; } if (tv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('translate').value=tv; document.getElementById('torder').value+='translate(,'; }" align="center" type=button value="Translate"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var sxv=prompt('SkewX (in degrees)?',''); if (sxv == null) { sxv=''; } if (sxv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('skewx').value=sxv; document.getElementById('torder').value+='skewX(,'; }" align="center" type=button value="SkewX"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var syv=prompt('SkewY (in degrees)?',''); if (syv == null) { syv=''; } if (syv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('skewy').value=syv; document.getElementById('torder').value+='skewY(,'; }" align="center" type=button value="SkewY"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var mv=prompt('Matrix (m1,m2,m3,m4,m5,m6)?',''); if (mv == null) { mv=''; } if (mv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('matrix').value=mv; document.getElementById('torder').value+='matrix(,'; }" align="center" type=button value="Matrix"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input align="center" type=submit id=submit name=submit value="Draw shape above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input align="center" type=submit id=submitsave name=submitsave value="Draw and save shape above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input align="center" type=reset id=reset name=reset value="Reset"></input></div>
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<br></form>
</body>
</html>
<?php 
 } else if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else {
   $what = $_POST['what'];
   $mode = "POST";
 }
 
    if (!file_exists("ideasfrom.txt")) {
      if (strlen($_GET['ideasfrom']) == 0) {
       file_put_contents("ideasfrom.txt", file_get_contents("http://en.wikipedia.org/wiki/Web_colors"));
      } else { 
       file_put_contents("ideasfrom.txt", file_get_contents($_GET['ideasfrom']));
      }
    }

 
 if ($what == "Text") {  // thanks to http://tutorials.jenkov.com/svg
   $prepre=''; //'<rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>';
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = urldecode($_POST['cx']); // 50
     $p3 = urldecode($_POST['cy']); // 50
     $p4 = str_replace("+"," ",urldecode($_POST['text'])); // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = urldecode($_GET['cx']); // 50
     $p3 = urldecode($_GET['cy']); // 50
     $p4 = str_replace("+"," ",urldecode($_GET['text'])); // 50
     $p5 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } 
   $hp1="";
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.=$prepre . '<text id="redtext" x="' . $p2 . '" y="' . $p3 . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>';
   
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}


function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo pi() * $p4 * $p4; ?></span>
<h1 align="center">HTML5 SVG Text</h1><?php echo '<div style="width:100%;text-align:center;"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . $prepre . '<text id="redtext" x="' . $p2 . '" y="' . $p3 . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . $prepre . '<text id="redtext" x="' . ($p4 * 2) . '" y="' . ($p4 * 2) . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . $prepre . '<text id="redtext" x="' . ($p4 * 2) . '" y="' . ($p4 * 2) . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Circle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['cx']; // 50
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['r']; // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['cx']; // 50
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['r']; // 50
     $p5 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<circle id="redcircle" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fill="' . $p5 . '" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}


function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo pi() * $p4 * $p4; ?></span>
<h1 align="center">HTML5 SVG Circle</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<circle id="redcircle" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<circle id="redcircle" cx="' . ($p4 * 2) . '" cy="' . ($p4 * 2) . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<circle id="redcircle" cx="' . ($p4 * 2) . '" cy="' . ($p4 * 2) . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Rectangle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['w']; // 300
     $p3 = $_POST['h']; // 100
     $p4 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['w']; // 300
     $p3 = $_GET['h']; // 100
     $p4 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo ($p2 * $p3); ?></span>
<h1 align="center">HTML5 SVG Rectangle</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo ($p2 * $p3); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo ($p2 * $p3); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Line") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['x1']; // 0
     $p3 = $_POST['y1']; // 0
     $p4 = $_POST['x2']; // 200
     $p5 = $_POST['y2']; // 100
     $p6 = $_POST['stroke']; // red
     $p7 = $_POST['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['x1']; // 0
     $p3 = $_GET['y1']; // 0
     $p4 = $_GET['x2']; // 200
     $p5 = $_GET['y2']; // 100
     $p6 = $_GET['stroke']; // red
     $p7 = $_GET['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo 0.0; ?></span>
<h1 align="center">HTML5 SVG Line</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo 0.0; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo 0.0; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['cx']; // 100
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['rx']; // 100
     $p5 = $_POST['ry']; // 50
     $p6 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['cx']; // 100
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['rx']; // 100
     $p5 = $_GET['ry']; // 50
     $p6 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo (pi() * $p4 * $p5); ?></span>
<h1 align="center">HTML5 SVG Ellipse</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo (pi() * $p4 * $p5); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo (pi() * $p4 * $p5); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Polygon") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['points']; // 20,10 300,20 170,50
     $p3 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['points']; // 20,10 300,20 170,50
     $p3 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<polygon  points="' . $p2 . '" fill="' . $p3 . '" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?></span>
<h1 align="center">HTML5 SVG Polygon</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Polyline") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_POST['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_GET['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<polyline points="' . $p2 . '" fill="' . $p3 . '" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}


function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?></span>
<h1 align="center">HTML5 SVG Polyline</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Gradient Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['rcx']; // 50%
     $p3 = $_POST['rcy']; // 50%
     $p4 = $_POST['rr']; // 50%
     $p5 = $_POST['rfx']; // 50%
     $p6 = $_POST['rfy']; // 50%
     $p7 = $_POST['s1offset']; // 0%
     $p8 = $_POST['s1stop-colorr']; // 200
     $p9 = $_POST['s1stop-colorg']; // 200
     $p10 = $_POST['s1stop-colorb']; // 200
     $p11 = $_POST['s1opacity']; // 0
     $p12 = $_POST['s2offset']; // 100%
     $p13 = $_POST['s2stop-colorr']; // 0
     $p14 = $_POST['s2stop-colorg']; // 0
     $p15 = $_POST['s2stop-colorb']; // 255
     $p16 = $_POST['s2opacity']; // 1
     $p17 = $_POST['cx']; // 100
     $p18 = $_POST['cy']; // 50
     $p19 = $_POST['rx']; // 100
     $p20 = $_POST['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['rcx']; // 50%
     $p3 = $_GET['rcy']; // 50%
     $p4 = $_GET['rr']; // 50%
     $p5 = $_GET['rfx']; // 50%
     $p6 = $_GET['rfy']; // 50%
     $p7 = $_GET['s1offset']; // 0%
     $p8 = $_GET['s1stop-colorr']; // 200
     $p9 = $_GET['s1stop-colorg']; // 200
     $p10 = $_GET['s1stop-colorb']; // 200
     $p11 = $_GET['s1opacity']; // 0
     $p12 = $_GET['s2offset']; // 100%
     $p13 = $_GET['s2stop-colorr']; // 0
     $p14 = $_GET['s2stop-colorg']; // 0
     $p15 = $_GET['s2stop-colorb']; // 255
     $p16 = $_GET['s2opacity']; // 1
     $p17 = $_GET['cx']; // 100
     $p18 = $_GET['cy']; // 50
     $p19 = $_GET['rx']; // 100
     $p20 = $_GET['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "") {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "") {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "") {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "") {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "") {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" />';
?>
<!DOCTYPE html>
<head>
<title>SVG</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
var done=false;

function maybetoobig(ins) {
  if (ins.length > 800) { document.getElementById('ixs').click(); ins='#'; }
  return ins;
}

function checksa() {
 <?php
   echo "\n var rapp='" . $rotateappend . "'; \n";
   if (!isset($_GET['rotate']) && !isset($_POST['rotate'])) {
     echo "\n  done=true; \n";
   } else if (isset($_GET['rotate'])) {
     if (('' . $_GET['rotate']) == '') { echo "\n  done=true; \n";   }
   } else if (isset($_POST['rotate'])) {
     if (('' . $_POST['rotate']) == '') { echo "\n  done=true; \n";   }
   }
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate']) || isset($_GET['translate']) || isset($_POST['translate'])    || isset($_GET['matrix']) || isset($_POST['matrix'])    || isset($_GET['skewx']) || isset($_POST['skewx'])    || isset($_GET['skewy']) || isset($_POST['skewy'])   ) {
     echo "\n document.getElementById('gtg').href+=maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&alreadythere=" . urlencode($previous) . "'); \n";
   }
 ?>
 if (document.getElementById('surfacearea').innerHTML != '') {
   alert('Your tracing gave area of ' + document.getElementById('surfacearea').innerHTML + ' and we calculated area to be ' + document.getElementById('vssurfacearea').innerHTML);
 } else {
   setTimeout(checksa, 2000);
 }
 if (!done) {
   done=true;
   if (document.body.innerHTML.indexOf('rotate(') != -1 && document.body.innerHTML.indexOf('translate(') == -1) {
     if (document.body.innerHTML.split('rotate(')[1].split(')')[0].indexOf(',') == -1 && rapp != '.01') {
       var rects=document.getElementById('svgelem').getBoundingClientRect();
       if (rapp.replace('.05','') == '') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.02') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',0)');
       } else if (rapp.replace('.05','') == '.03') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',0)');
       } else if (rapp.replace('.05','') == '.04') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.06') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 2) + ')');
       } else if (rapp.replace('.05','') == '.07') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',0,' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.08') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 2) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       } else if (rapp.replace('.05','') == '.09') {
       document.body.innerHTML=document.body.innerHTML.replace('rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ')', 'rotate(' + document.body.innerHTML.split('rotate(')[1].split(')')[0] + ',' + eval(eval(('' + rects.width).replace('px','')) / 1) + ',' + eval(eval(('' + rects.height).replace('px','')) / 1) + ')');
       }
     }
   }
 }
 if (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

function centerinparent(element) { //only works for SVG elements ... thanks to https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}
</script>
</head>
<body style="background-color:#F0F0F0;" onload="checksa();"><span style="display:none;" id="surfacearea"></span><span style="display:none;" id="vssurfacearea"><?php echo (pi() * $p19 * $p20); ?></span>
<!--input id='fkludge' type='hidden' value="../../HTMLCSS/geometry_tracing.html?area=<?php echo (pi() * $p19 * $p20); ?>&svg=<?php echo str_replace("+", "%20", urlencode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . $previous . '<defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" />' . $gafter . '</svg>')); ?>"</input-->
<h1 align="center">HTML5 SVG Gradient Ellipse</h1><?php echo '<div style="width:100%;height:300px;text-align:center"><svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo (pi() * $p19 * $p20); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo (pi() * $p19 * $p20); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . reorderar($gbefore) . notprevious($previous . '<defs><radialGradient id="gradient" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fx="' . $p5 . '" fy="' . $p6 . '"><stop offset="' . $p7 . '" style="stop-color:rgb(' . $p8 . ',' . $p9 . ',' . $p10 . '); stop-opacity:' . $p11 . '"/><stop offset="' . $p12 . '" style="stop-color:rgb(' . $p13 . ',' . $p14 . ',' . $p15 . '); stop-opacity:' . $p16 . '"/></radialGradient></defs><ellipse cx="' . $p17 . '" cy="' . $p18 . '" rx="' . $p19 . '" ry="' . $p20 . '" style="fill:url(#gradient)" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe></body>
<form onsubmit="  return true;" id="xsvgform" method="POST" action="./SVG_Primer.php" align="center" style="display:none;width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<input type=hidden id="alreadythere" name=alreadythere value='' title='<?php global $previous;  echo urlencode($previous); ?>'></input>
<input type=hidden id=rotate name=rotate value='<?php global $rotate;  echo urldecode($rotate . $rotateappend); ?>'></input>
<input type=hidden id=translate name=translate value='<?php global $translate;  echo str_replace("+"," ",urldecode($translate)); ?>'></input>
<input type=hidden id=skewx name=skewx value='<?php global $skewx;  echo str_replace("+"," ",urldecode($skewx)); ?>'></input>
<input type=hidden id=skewy name=skewy value='<?php global $skewy;  echo str_replace("+"," ",urldecode($skewy)); ?>'></input>
<input type=hidden id=matrix name=matrix value='<?php global $matrix;  echo str_replace("+"," ",urldecode($matrix)); ?>'></input>
<input type=hidden id=torder name=torder value='<?php global $torder;  echo str_replace("+"," ",urldecode($torder)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } 
?>