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

 $animatemode='';
 $animatefrom='';
 $animateto='';
 $animatepath='';
 $animateothers='';
 $prepre='';
 $hp1="";
 $gbefore="";
 $gafter="";
 $previous="";
 $fld="";
 
 function oururldecode($inth) { 
   global $fld, $animateothers;
   $outh=str_replace("+"," ",urldecode($inth));
   if (strpos($outh, ".") !== false && $fld != "") {
     $animateothers.='<animate attributeName="' . $fld . '" attributeType="XML"
             from="' . explode('.', $outh)[0] . '"  to="' . explode('.', $outh)[1] . '"
             begin="0s" dur="5s"
             fill="remove" repeatCount="indefinite"/>';
   }
   return $outh; //explode('.', $outh)[0];
 }
 
 function animateg($inthing) {
   global $animatemode, $animatefrom, $animateto, $animatepath, $animateothers;
   $z=0;
   $extras="";
   $toend="/>";
   $outthing=$inthing;
   if ($animatemode == "" && ($animatepath != "" || $animateothers != "")) {
   $animatemode="path";
   $animsfrom=$animatepath;
   } else if (($animatepath != "" || $animateothers != "")) {
   $animatemode.=";path";
   $animsfrom.=";" . $animatepath;
   $animsto.=";";
   }
   if ($animatemode != "") {
   $anims=explode(";", $animatemode);
   $animsfrom=explode(";", $animatefrom);
   $animsto=explode(";", $animateto);
   
   for ($ir=0; $ir<sizeof($anims); $ir++) {
   if ($anims[$ir] != "") {
   if ($anims[$ir] == "path") {
       if ($animatepath != "") {
       $extras='<animateMotion
              path="' . $animatepath . '"
              begin="0s" dur="10s" repeatCount="indefinite" />';
       }
       $extras.=$animateothers;
   } else {
   $extras='<animateTransform attributeName="transform"
                    type="' . $anims[$ir] . '"
                    from="' . $animsfrom[$ir] . '" 
                    to="' . $animsto[$ir] . '"
                    begin="0s" 
                    dur="10s"
                    repeatCount="indefinite"
                    additive="sum" />';
   }

   if (strpos($inthing, "</g>") !== false) {
   $outthing=str_replace("</g>", $extras . "</g>", $outthing);
   } else if (strpos($inthing, "</defs>") !== false) {
   $rest=explode("</defs>", $inthing)[1];
   $toend="</" . explode(">", explode(" ", substr($rest,1))[0])[0] . ">";
   if (strpos($rest, "/>") !== false) {
   $outthing=str_replace($rest, explode("/>", $rest)[0] . ">" . $extras . $toend, $outthing);
   } else {
   $outthing=str_replace("</defs>", "</defs>" . $extras, $outthing);
   }
   } else if (strpos(substr($inthing,$z), "/>") !== false) {
   $toend="</" . explode(">", explode(" ", substr($inthing,1))[0])[0] . ">";
   $outthing=str_replace("/>", ">" . $extras . $toend, $outthing);
   } else if (strpos($inthing, "</text>") !== false) {
   $outthing=str_replace("</text>", $extras . "</text>", $outthing);
   }
   }
   }
   }
   return $outthing;
 }
 
 
 function animateperhaps($inmode, $inthing) {
   global $animatemode, $animatefrom, $animateto, $animatepath, $animateothers;
   $delim="";
   $indelim="";
   if ($animatemode != "") { $delim=";"; }
   if (strpos($inthing, ".") !== false) {
     $ofinterest="." . explode(".", $inthing)[1];
     if ($inmode == "rotate") {
       if (strlen(trim(  explode(",", $ofinterest)[0]   )) == 3 && strpos($ofinterest, ".0") !== false) {
         $animatemode=$animatemode;
       } else {
         $animatemode.=$delim . $inmode;
         $animateto.=$delim . trim(explode(",", substr($ofinterest,1))[0]);
         $animatefrom.=$delim . str_replace("." . trim(explode(",", substr($ofinterest,1))[0]), "", $inthing);
         //return "";
       }
     } else { //if (strpos($inthing, ",") !== false) {
       $animatemode.=$delim . $inmode;
       $ofs=explode(",", $inthing);
       $animateto.=$delim . explode(".", $ofs[0])[1];
       $animatefrom.=$delim . str_replace("." . explode(".", $ofs[0])[1], "", $ofs[0]);
       $indelim=",";
       for ($j=1; $j<sizeof($ofs); $j++) {
       $animateto.=$indelim . explode(".", $ofs[$j])[1];
       $animatefrom.=$indelim . str_replace("." . explode(".", $ofs[$j])[1], "", $ofs[$j]);
       }
     //} else {
     }
   }
   return $inthing;
 }
 
 
 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 = animateperhaps('rotate', str_replace("+"," ",$_GET['rotate']));
 } else if (isset($_POST['rotate'])) {
   $rotate = animateperhaps('rotate', str_replace("+"," ",$_POST['rotate']));
 }
 $translate="";
 if (isset($_GET['translate'])) {
   $translate = animateperhaps('translate', str_replace("+"," ",$_GET['translate']));
 } else if (isset($_POST['translate'])) {
   $translate = animateperhaps('translate', str_replace("+"," ",$_POST['translate']));
 }
 $scale="";
 if (isset($_GET['scale'])) {
   $scale = animateperhaps('scale', str_replace("+"," ",$_GET['scale']));
 } else if (isset($_POST['scale'])) {
   $scale = animateperhaps('scale', str_replace("+"," ",$_POST['scale']));
 }
 $skewx="";
 if (isset($_GET['skewx'])) {
   $skewx = animateperhaps('skewx', str_replace("+"," ",$_GET['skewx']));
 } else if (isset($_POST['skewx'])) {
   $skewx = animateperhaps('skewx', str_replace("+"," ",$_POST['skewx']));
 }
 $skewy="";
 if (isset($_GET['skewy'])) {
   $skewy = animateperhaps('skewy', str_replace("+"," ",$_GET['skewy']));
 } else if (isset($_POST['skewy'])) {
   $skewy = animateperhaps('skewy', str_replace("+"," ",$_POST['skewy']));
 }
 $matrix="";
 if (isset($_GET['matrix'])) {
   $matrix = animateperhaps('matrix', str_replace("+"," ",$_GET['matrix']));
 } else if (isset($_POST['matrix'])) {
   $matrix = animateperhaps('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']);
 }
 $animatepath="";
 if (isset($_GET['animatepath'])) {
   $animatepath = str_replace("+"," ",$_GET['animatepath']);
 } else if (isset($_POST['animatepath'])) {
   $animatepath = str_replace("+"," ",$_POST['animatepath']);
 }
 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'];
 }
 
if ($what == "Path") {
   if ($mode == "POST") {
     $p2 = $_POST['points']; 
   } else {
     $p2 = $_GET['points']; 
   } 
   if (strtolower($p2) == "$p2") {
     if ($animatepath == "") { $animatepath="$p2"; }
     $what="Line";
   }
 }
 
 $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;
  $jinad=$inad;
  $interesting=false;
  $bad=false;
  if ($previous != "") {
    $jinad=str_replace($previous . $previous, $previous, $inad);
    $xinad='';
    for ($iu=0; $iu<strlen($jinad); $iu++) {
     if (substr($jinad,$iu,1) == '<') {
       $interesting=true;
       $bad=false;
       $xinad.=substr($jinad,$iu,1);
     } else if (substr($jinad,$iu,1) == '>') {
       $interesting=false;
       $xinad.=substr($jinad,$iu,1);
       $bad=false;
     } else if ($interesting && strpos(('~' . substr($jinad,$iu)),'~opacity') !== false) {
       $interesting=false;
       $xinad.=substr($jinad,$iu,1);
       $bad=false;
     } else if ($interesting && substr($jinad,$iu,1) == '.') {
       $bad=true;
     } else if ($interesting && $bad && substr($jinad,$iu,1) >= '0' && substr($jinad,$iu,1) <= '9') {
       $bad=$bad;
     } else if ($interesting && $bad && substr($jinad,$iu,1) == '%') {
       $bad=$bad;
     } else if ($interesting) {
       $bad=false;
       $xinad.=substr($jinad,$iu,1);
     } else {
       $bad=false;
       $xinad.=substr($jinad,$iu,1);
     }
    }
    return $xinad;
  }
  return $jinad;
}

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, $scale;
 $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,$scale,$translate,$matrix,$skewx,$skewy,$torder,$fld,$animatemode,$animateto,$animatefrom,$animatepath,$animateothers;
 $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 title='Involve a decimal point and we animate [From].[To]' type=text id=cx name=cx value='50%'></input><br>";
    odivcontents = odivcontents + "<br>Text Y: <input title='Involve a decimal point and we animate [From].[To]' 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 title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cx name=cx value=50></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius: <input title='Involve a decimal point and we animate [From].[To]' 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 title='Involve a decimal point and we animate [From].[To]' type=number step=any id=w name=w value=300></input><br>";
    odivcontents = odivcontents + "<br>Rectangle Height: <input title='Involve a decimal point and we animate [From].[To]' 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 title='Involve a decimal point and we animate [From].[To]' type=number step=any id=x1 name=x1 value=0></input><br>";
    odivcontents = odivcontents + "<br>First Y: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=y1 name=y1 value=0></input><br>";
    odivcontents = odivcontents + "<br>Last X: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=x2 name=x2 value=200></input><br>";
    odivcontents = odivcontents + "<br>Last Y: <input title='Involve a decimal point and we animate [From].[To]' 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 title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "<br>Centre Y: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "<br>Radius X: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "<br>Radius Y: <input title='Involve a decimal point and we animate [From].[To]' 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 == "Path") {
    //hideit=true;
    odivcontents = odivcontents + '<br>Path Co-ordinates and Instructions (all lowercase for animation path please): <input onblur=" if (this.value.indexOf(' + "'" + ',' + "'" + ') != -1 && this.value.toLowerCase() == this.value) { document.getElementById(' + "'" + 'animatepath' + "'" + ').value=this.value;  document.getElementById(' + "'" + 'fill' + "'" + ').value=' + "'" + 'transparent' + "'" + ';   }  " type=text id=points name=points value="M10,50 q60,50 100,0 q60,-50 100,0"></input><br><div>M = moveto, L = lineto, H = horizontal lineto, V = vertical lineto, C = curveto, S = smooth curveto, Q = quadratic Bézier curve, T = smooth quadratic Bézier curveto, A = elliptical Arc, Z = closepath</div><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 title="Involve a decimal point and we animate [From].[To]" type=text id=rcx name=rcx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Centre Y: <input title="Involve a decimal point and we animate [From].[To]" type=text id=rcy name=rcy value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient Radius %: <input title="Involve a decimal point and we animate [From].[To]" type=text id=rr name=rr value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % X: <input title="Involve a decimal point and we animate [From].[To]" type=text id=rfx name=rfx value="50%"></input><br>';
    odivcontents = odivcontents + 'Radial Gradient % Y: <input title="Involve a decimal point and we animate [From].[To]" type=text id=rfy name=rfy value="50%"></input><br>';
    odivcontents = odivcontents + 'Stop 1 Offset %: <input title="Involve a decimal point and we animate [From].[To]" 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 title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cx name=cx value=100></input><br>";
    odivcontents = odivcontents + "Centre Y: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=cy name=cy value=50></input><br>";
    odivcontents = odivcontents + "Radius X: <input title='Involve a decimal point and we animate [From].[To]' type=number step=any id=rx name=rx value=100></input><br>";
    odivcontents = odivcontents + "Radius Y: <input title='Involve a decimal point and we animate [From].[To]' 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='Path'>Path (animate)</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)?  For animation enter as [animateFromIntegerDegrees].[animateToIntegerDegrees] or 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 (integerX,integerY)?  For animation enter as [translationXFromInteger].[translationXToInteger],[translationYFromInteger].[translationYToInteger]',''); 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 scv=prompt('Scale (in Scientific Notation No Decimal Places eg. 0.005 is 5e-3) (scale[X[,scaleY]])?  For animation enter as [scaleXFromScientificNotationNoDecimalPlace].[scaleXToScientificNotationNoDecimalPlace],[scaleYFromScientificNotationNoDecimalPlace].[scaleYToScientificNotationNoDecimalPlace]',''); if (scv == null) { scv=''; } if (scv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('scale').value=scv; document.getElementById('torder').value+='scale(,'; }" align="center" type=button value="Scale"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var sxv=prompt('SkewX (in degrees)?  For animation enter as [skewXFromIntegerDegrees].[skewXToIntegerDegrees]',''); 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)?  For animation enter as [skewYFromIntegerDegrees].[skewYToIntegerDegrees]',''); 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 in scientic notation with no decimal place eg. 0.005 should be entered as 5e-3 (m1,m2,m3,m4,m5,m6)?   For animation enter as [m1FromScienticNotationNoDecimalPlace].[m1ToScienticNotationNoDecimalPlace],[m2FromScienticNotationNoDecimalPlace].[m2ToScienticNotationNoDecimalPlace],[m3FromScienticNotationNoDecimalPlace].[m3ToScienticNotationNoDecimalPlace],[m4FromScienticNotationNoDecimalPlace].[m4ToScienticNotationNoDecimalPlace],[m5FromScienticNotationNoDecimalPlace].[m5ToScienticNotationNoDecimalPlace],[m6FromScienticNotationNoDecimalPlace].[m6ToScienticNotationNoDecimalPlace]',''); 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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld="x";
     $p2 = oururldecode($_POST['cx']); // 50
     $fld="y";
     $p3 = oururldecode($_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 . '"';
     $fld="x";
     $p2 = oururldecode($_GET['cx']); // 50
     $fld="y";
     $p3 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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;
var animatemode='';
var animatefrom='';
var animateto='';

function animatemaybe(inwhat) {
}

function maybetoobig(ins) {
  if (('?' + (ins + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins; }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld='cx';
     $p2 = oururldecode($_POST['cx']); // 50
     $fld='cy';
     $p3 = oururldecode($_POST['cy']); // 50
     $fld='r';
     $p4 = oururldecode($_POST['r']); // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $fld='cx';
     $p2 = oururldecode($_GET['cx']); // 50
     $fld='cy';
     $p3 = oururldecode($_GET['cy']); // 50
     $fld='r';
     $p4 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld='width';
     $p2 = oururldecode($_POST['w']); // 300
     $fld='height';
     $p3 = oururldecode($_POST['h']); // 100
     $p4 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $fld='width';
     $p2 = oururldecode($_GET['w']); // 300
     $fld='height';
     $p3 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld='x1';
     $p2 = oururldecode($_POST['x1']); // 0
     $fld='y1';
     $p3 = oururldecode($_POST['y1']); // 0
     $fld='x2';
     $p4 = oururldecode($_POST['x2']); // 200
     $fld='y2';
     $p5 = oururldecode($_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 . '"';
     $fld='x1';
     $p2 = oururldecode($_GET['x1']); // 0
     $fld='y1';
     $p3 = oururldecode($_GET['y1']); // 0
     $fld='x2';
     $p4 = oururldecode($_GET['x2']); // 200
     $fld='y2';
     $p5 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld='cx';
     $p2 = oururldecode($_POST['cx']); // 100
     $fld='cy';
     $p3 = oururldecode($_POST['cy']); // 50
     $fld='rx';
     $p4 = oururldecode($_POST['rx']); // 100
     $fld='ry';
     $p5 = oururldecode($_POST['ry']); // 50
     $p6 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $fld='cx';
     $p2 = oururldecode($_GET['cx']); // 100
     $fld='cy';
     $p3 = oururldecode($_GET['cy']); // 50
     $fld='rx';
     $p4 = oururldecode($_GET['rx']); // 100
     $fld='ry';
     $p5 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(notprevious($previous . '<polygon  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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } else if ($what == "Path") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['points']; // M10,50 q60,50 100,0 q60,-50 100,0
     $p3 = $_POST['fill']; // red
     //if ($animatepath == $p2) { $p3="transparent";   }
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['points']; // M10,50 q60,50 100,0 q60,-50 100,0
     $p3 = $_GET['fill']; // red
     //if ($animatepath == $p2) { $p3="transparent";   }
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
     $posttranslate="";
     if ($matrix != "") {
       $posttranslate.=" matrix(" .  $matrix . ")";
     }
     if ($skewx != "") {
       $posttranslate.=" skewX(" .  $skewx . ")";
     }
     if ($skewy != "") {
       $posttranslate.=" skewY(" .  $skewy . ")";
     }
     if ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
   }
   $previous.='<path d="' . $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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 Path</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) . animateg(notprevious($previous . '<path d="' . $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) . animateg(notprevious($previous . '<path d="' . $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) . animateg(notprevious($previous . '<path d="' . $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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></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 . '"';
     $fld='ry';
     $fld='cx';
     $p2 = oururldecode($_POST['rcx']); // 50%
     $fld='cy';
     $p3 = oururldecode($_POST['rcy']); // 50%
     $fld='r';
     $p4 = oururldecode($_POST['rr']); // 50%
     $fld='fx';
     $p5 = oururldecode($_POST['rfx']); // 50%
     $fld='fy';
     $p6 = oururldecode($_POST['rfy']); // 50%
     $fld='offset';
     $p7 = oururldecode($_POST['s1offset']); // 0%
     $fld='';
     $p8 = oururldecode($_POST['s1stop-colorr']); // 200
     $fld='';
     $p9 = oururldecode($_POST['s1stop-colorg']); // 200
     $fld='';
     $p10 = oururldecode($_POST['s1stop-colorb']); // 200
     $fld='';
     $p11 = oururldecode($_POST['s1opacity']); // 0
     $fld='';
     $p12 = oururldecode($_POST['s2offset']); // 100%
     $fld='';
     $p13 = oururldecode($_POST['s2stop-colorr']); // 0
     $fld='';
     $p14 = oururldecode($_POST['s2stop-colorg']); // 0
     $fld='';
     $p15 = oururldecode($_POST['s2stop-colorb']); // 255
     $fld='';
     $p16 = oururldecode($_POST['s2opacity']); // 1
     $fld='cx';
     $p17 = oururldecode($_POST['cx']); // 100
     $fld='cy';
     $p18 = oururldecode($_POST['cy']); // 50
     $fld='rx';
     $p19 = oururldecode($_POST['rx']); // 100
     $fld='ry';
     $p20 = oururldecode($_POST['ry']); // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $fld='cx';
     $p2 = oururldecode($_GET['rcx']); // 50%
     $fld='cy';
     $p3 = oururldecode($_GET['rcy']); // 50%
     $fld='r';
     $p4 = oururldecode($_GET['rr']); // 50%
     $fld='fx';
     $p5 = oururldecode($_GET['rfx']); // 50%
     $fld='fy';
     $p6 = oururldecode($_GET['rfy']); // 50%
     $fld='offset';
     $p7 = oururldecode($_GET['s1offset']); // 0%
     $fld='';
     $p8 = oururldecode($_GET['s1stop-colorr']); // 200
     $fld='';
     $p9 = oururldecode($_GET['s1stop-colorg']); // 200
     $fld='';
     $p10 = oururldecode($_GET['s1stop-colorb']); // 200
     $fld='';
     $p11 = oururldecode($_GET['s1opacity']); // 0
     $fld='';
     $p12 = oururldecode($_GET['s2offset']); // 100%
     $fld='';
     $p13 = oururldecode($_GET['s2stop-colorr']); // 0
     $fld='';
     $p14 = oururldecode($_GET['s2stop-colorg']); // 0
     $fld='';
     $p15 = oururldecode($_GET['s2stop-colorb']); // 255
     $fld='';
     $p16 = oururldecode($_GET['s2opacity']); // 1
     $fld='cx';
     $p17 = oururldecode($_GET['cx']); // 100
     $fld='cy';
     $p18 = oururldecode($_GET['cy']); // 50
     $fld='rx';
     $p19 = oururldecode($_GET['rx']); // 100
     $fld='ry';
     $p20 = oururldecode($_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 ($scale != "") {
       $posttranslate.=" scale(" .  $scale . ")";
     }
   if ($previous != "") { 
     if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($translate != "" && strpos($translate, ".") === false) {   
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($rotate != "" && strpos($rotate, ".") === false) {   
       $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
     } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
       $gbefore='<g transform="' . trim($posttranslate) . '">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($translate != "" && $rotate != "" && strpos($translate, ".") === false && strpos($rotate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ') rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($translate != "" && strpos($translate, ".") === false) {   
     $hp1="";
       $gbefore='<g transform="translate(' . $translate . ')' . $posttranslate . '">';  $gafter="</g>";
   } else if ($rotate != "" && strpos($rotate, ".") === false) {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')' . $posttranslate . '">';  $gafter="</g>";     
   } else if ($posttranslate != "" && strpos($posttranslate, ".") === false) {   
     $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 + '  ').substring(1).trim().split('?rotate=')[0]).length > 800) { document.getElementById('ixs').click(); ins='#'; return ins;  }
  return '?' + (ins + '  ').substring(1).trim().split('?rotate=')[0];
}

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=document.getElementById('gtg').href.split('?')[0].split('#')[0] + maybetoobig('?rotate=" . urlencode($rotate) . "&translate=" . urlencode($translate) . "&scale=" . urlencode($scale) . "&matrix=" . urlencode($matrix) . "&skewx=" . urlencode($skewx) . "&skewy=" . urlencode($skewy) . "&torder=" . urlencode($torder) . "&animatepath=" . urlencode($animatepath) . "&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>
<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) . animateg(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) . animateg(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) . animateg(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=scale name=scale value='<?php global $scale;  echo str_replace("+"," ",urldecode($scale)); ?>'></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 type=hidden id=animatepath name=animatepath value='<?php global $animatepath;  echo str_replace("+"," ",urldecode($animatepath)); ?>'></input>
<input style='display:none;' type=submit id=ixs value='Submit'></input></form>
</body>
</html>
<?php 
 } 
?>
