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

 $prepre='';
 $hp1="";
 $gbefore="";
 $gafter="";
 $previous="";
 if (isset($_GET['alreadythere'])) {
   $previous = str_replace("+"," ",$_GET['alreadythere']);
 } else if (isset($_POST['alreadythere'])) {
   $previous = str_replace("+"," ",$_POST['alreadythere']);
 }
 $rotate="";
 if (isset($_GET['rotate'])) {
   $rotate = str_replace("+"," ",$_GET['rotate']);
 } else if (isset($_POST['rotate'])) {
   $rotate = str_replace("+"," ",$_POST['rotate']);
 }
 $ris=255;
 $gis=0;
 $bis=0;
 $iurl = "";
 $what = "";
 if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else if (isset($_POST['what'])) {
   $what = $_POST['what'];
 }
 $mode = "GET";
 $p1 = "";
 $p2 = "";
 $p3 = "";
 $p4 = "";
 $p5 = "";
 $p6 = "";
 $p7 = "";
 $p8 = "";
 $p9 = "";
 $p10 = "";


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

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

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


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

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

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

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

</script>
</head>
<body align="center" style="background-color:teal;">
<h1 style="width:100%;text-align:center;">HTML5 SVG Tutorial</h1>
<h4 style="width:100%;text-align:center;">(Optional geometry tracing game as well)</h4>
<br>
<form onsubmit=" return true;" id="svgform" method="POST" action="./SVG_Primer.php" align="center" style="width: 96%; background-color:pink; padding: 20 20 20 20; border: 5px solid red;">
<!--input style='display:none;' type='text' value='255' name='r' id='r'></input>
<input style='display:none;' type='text' value='0' name='g' id='g'></input>
<input style='display:none;' type='text' value='0' name='b' id='b'></input-->
<div id="theselect" align="center"><br><select align="center" name="what" id="what" onchange="fill_in_theparameters(this);"><option value=''>Please select a SVG shape to create below ...</option>
<option value='Text'>Text</option>
<option value='Circle'>Circle</option>
<option value='Rectangle'>Rectangle</option>
<option value='Line'>Line</option>
<option value='Ellipse'>Ellipse</option>
<option value='Polygon'>Polygon</option>
<option value='Polyline'>Polyline</option>
<option value='Gradient Ellipse'>Gradient Ellipse</option>
</select>
</div>
<div id="theparameters" align="center">
</div>
<br><div id="thebuttons" align="center"><input onclick="document.getElementById('alreadythere').value=decodeURIComponent(document.getElementById('alreadythere').title);" align="center" type="submit" id=group name=group value="Group and draw shape(s) above"></input>&nbsp;&nbsp;&nbsp;&nbsp;<input onclick="var rv=prompt('Rotation (in degrees)?',''); if (rv == null) { rv=''; } if (rv.replace(/0/g,'').replace(/-/g,'').replace(/\./g,'') != '') { document.getElementById('rotate').value=rv; }" align="center" type=button value="Rotate"></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=''></input>
<br></form>
</body>
</html>
<?php 
 } else if (isset($_GET['what'])) {
   $what = $_GET['what'];
 } else {
   $what = $_POST['what'];
   $mode = "POST";
 }
 
    if (!file_exists("ideasfrom.txt")) {
      if (strlen($_GET['ideasfrom']) == 0) {
       file_put_contents("ideasfrom.txt", file_get_contents( "http://en.wikipedia.org/wiki/Web_colors"));
      } else { 
       file_put_contents("ideasfrom.txt", file_get_contents($_GET['ideasfrom']));
      }
    }

 
 if ($what == "Text") {  // thanks to http://tutorials.jenkov.com/svg
   $prepre=''; //'<rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>';
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = urldecode($_POST['cx']); // 50
     $p3 = urldecode($_POST['cy']); // 50
     $p4 = str_replace("+"," ",urldecode($_POST['text'])); // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = urldecode($_GET['cx']); // 50
     $p3 = urldecode($_GET['cy']); // 50
     $p4 = str_replace("+"," ",urldecode($_GET['text'])); // 50
     $p5 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } 
   $hp1="";
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . $prepre . '<text id="redtext" x="' . $p2 . '" y="' . $p3 . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . $prepre . '<text id="redtext" x="' . ($p4 * 2) . '" y="' . ($p4 * 2) . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . $prepre . '<text id="redtext" x="' . ($p4 * 2) . '" y="' . ($p4 * 2) . '" dominant-baseline="central" text-anchor="middle" fill="' . $p5 . '">' . $p4 . '</text>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Circle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['cx']; // 50
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['r']; // 50
     $p5 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['cx']; // 50
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['r']; // 50
     $p5 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<circle id="redcircle" cx="' . $p2 . '" cy="' . $p3 . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<circle id="redcircle" cx="' . ($p4 * 2) . '" cy="' . ($p4 * 2) . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo pi() * $p4 * $p4; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<circle id="redcircle" cx="' . ($p4 * 2) . '" cy="' . ($p4 * 2) . '" r="' . $p4 . '" fill="' . $p5 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Rectangle") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['w']; // 300
     $p3 = $_POST['h']; // 100
     $p4 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['w']; // 300
     $p3 = $_GET['h']; // 100
     $p4 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo ($p2 * $p3); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo ($p2 * $p3); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<rect id="redrect" width="' . $p2 . '" height="' . $p3 . '" fill="' . $p4 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Line") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['x1']; // 0
     $p3 = $_POST['y1']; // 0
     $p4 = $_POST['x2']; // 200
     $p5 = $_POST['y2']; // 100
     $p6 = $_POST['stroke']; // red
     $p7 = $_POST['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['x1']; // 0
     $p3 = $_GET['y1']; // 0
     $p4 = $_GET['x2']; // 200
     $p5 = $_GET['y2']; // 100
     $p6 = $_GET['stroke']; // red
     $p7 = $_GET['stroke-width']; // 2
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo 0.0; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo 0.0; ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<line x1="' . $p2 . '" y1="' . $p3 . '" x2="' . $p4 . '" y2="' . $p5 . '" style="stroke:' . $p6 . ';stroke-width:' . $p7 . '"/>') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['cx']; // 100
     $p3 = $_POST['cy']; // 50
     $p4 = $_POST['rx']; // 100
     $p5 = $_POST['ry']; // 50
     $p6 = $_POST['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['cx']; // 100
     $p3 = $_GET['cy']; // 50
     $p4 = $_GET['rx']; // 100
     $p5 = $_GET['ry']; // 50
     $p6 = $_GET['fill']; // red
     if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php echo (pi() * $p4 * $p5); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php echo (pi() * $p4 * $p5); ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<ellipse cx="' . $p2 . '" cy="' . $p3 . '" rx="' . $p4 . '" ry="' . $p5 . '" fill="' . $p6 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</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);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<polygon  points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Polyline") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_POST['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['points']; // 0,0 0,20 20,20 20,40 40,40 40,60
     $p3 = $_GET['fill']; // red
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (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">' . $gbefore . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg></div>'; ?>
<br><a id="gtg" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a><?php echo stuffaround($iurl); ?>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game below ...">Fancy a tracing accuracy test, below?</a>&nbsp;&nbsp;<a onclick="location.href='#ypt';" style="cursor:pointer;text-decoration:underline;" title="Navigate to YUI game way below ...">Fancy a YUI based tracing accuracy test, way below?</a><?php echo stuffaround($iurl); ?><br><br><iframe src="../../HTMLCSS/geometry_tracing.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
<br><br><a id="ypt" align="center" href="./SVG_Primer.php" title="Another go">Another SVG go?</a>&nbsp;&nbsp;<a onclick="location.href='#gtg';" style="cursor:pointer;text-decoration:underline;" title="Navigate to game above ...">Fancy a tracing accuracy test, above?</a><br><iframe id="iypt" src="../../HTMLCSS/yui_path_tool.html?area=<?php $coa=explode(",",str_replace(" ",",",$p2));  $coaclosed=explode(",",str_replace(" ",",",$p2) . "," . $coa[0] . "," . $coa[1]);  $ais=0.0;  for ($ii=0; $ii<(-2 + sizeof($coaclosed)); $ii+=2) { $ais+=(($coaclosed[$ii]) * ($coaclosed[3 + $ii])); $ais-=(($coaclosed[1 + $ii]) * ($coaclosed[2 + $ii]));  } if ($ais < 0.0) { echo ($ais / (-2.0)); } else { echo ($ais / 2.0); } ?>&svg=base64<?php echo base64_encode('<svg id="svgelem"' . $hp1 . ' xmlns="http://www.w3.org/2000/svg">' . $gbefore . notprevious($previous . '<polyline points="' . $p2 . '" fill="' . $p3 . '" />') . $gafter . '</svg>'); ?>" width="100%" height="800px"></iframe>
</body>
</html>
<?php 
 } else if ($what == "Gradient Ellipse") {
   if ($mode == "POST") {
     $p1 = $_POST['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_POST['rcx']; // 50%
     $p3 = $_POST['rcy']; // 50%
     $p4 = $_POST['rr']; // 50%
     $p5 = $_POST['rfx']; // 50%
     $p6 = $_POST['rfy']; // 50%
     $p7 = $_POST['s1offset']; // 0%
     $p8 = $_POST['s1stop-colorr']; // 200
     $p9 = $_POST['s1stop-colorg']; // 200
     $p10 = $_POST['s1stop-colorb']; // 200
     $p11 = $_POST['s1opacity']; // 0
     $p12 = $_POST['s2offset']; // 100%
     $p13 = $_POST['s2stop-colorr']; // 0
     $p14 = $_POST['s2stop-colorg']; // 0
     $p15 = $_POST['s2stop-colorb']; // 255
     $p16 = $_POST['s2opacity']; // 1
     $p17 = $_POST['cx']; // 100
     $p18 = $_POST['cy']; // 50
     $p19 = $_POST['rx']; // 100
     $p20 = $_POST['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   } else {
     $p1 = $_GET['height']; // 200
     $hp1=' height="' . $p1 . '"';
     $p2 = $_GET['rcx']; // 50%
     $p3 = $_GET['rcy']; // 50%
     $p4 = $_GET['rr']; // 50%
     $p5 = $_GET['rfx']; // 50%
     $p6 = $_GET['rfy']; // 50%
     $p7 = $_GET['s1offset']; // 0%
     $p8 = $_GET['s1stop-colorr']; // 200
     $p9 = $_GET['s1stop-colorg']; // 200
     $p10 = $_GET['s1stop-colorb']; // 200
     $p11 = $_GET['s1opacity']; // 0
     $p12 = $_GET['s2offset']; // 100%
     $p13 = $_GET['s2stop-colorr']; // 0
     $p14 = $_GET['s2stop-colorg']; // 0
     $p15 = $_GET['s2stop-colorb']; // 255
     $p16 = $_GET['s2opacity']; // 1
     $p17 = $_GET['cx']; // 100
     $p18 = $_GET['cy']; // 50
     $p19 = $_GET['rx']; // 100
     $p20 = $_GET['ry']; // 50
     //if (isset($_POST['submitsave'])) $iurl=saveit($what);
   }
   if ($previous != "") { 
     if ($rotate != "") {   
       $gbefore='<g transform="rotate(' . $rotate . ')">';  $gafter="</g>";
     } else {  
       $gbefore="<g>"; $gafter="</g>";  
     }  
     $hp1="";
   } else if ($rotate != "") {   
     $hp1="";
        $gbefore='<g transform="rotate(' . $rotate . ')">';  $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'>
function checksa() {
 <?php
   if (isset($_GET['group']) || isset($_POST['group']) || isset($_GET['rotate']) || isset($_POST['rotate'])) {
     echo "document.getElementById('gtg').href+='?rotate=" . urlencode($rotate) . "&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 (1 == 7) { centerinparent(document.getElementById('svgelem')); }
}

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

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

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