Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/Examples/
Upload File :
Current File : //home/beeson/public_html/WebMathXpert/Examples/SVGExample2.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <style>
        /* Define a container div with absolute positioning */
        #svgContainer {
            position: relative;
        }
    </style>
</head>
<body>

<button onclick="LargerType()">Larger Type</button>
<button onclick="SmallerType()">Smaller Type</button>
<button onclick="AutoStep()">Auto Step</button>

<div id="svgContainer">

    <!-- SVG Element 1 -->
    <svg id="line0" width="102" height="51" viewBox = "0 0 102 51" xmlns="http://www3.org/2000/svg" style="position:absolute;left: 0; top: 0;">
        <text x="16" y="32" style="font-style: italic; font-size: 12pt; fill: rgb(0,0,0);">y </text>
        <text x="28" y="33" style="font-style: roman; font-size: 12pt; fill: rgb(0,0,0);">= </text>
        <text x="40" y="32" style="font-style: italic; font-size: 12pt; fill: rgb(0,0,0);">x </text>
        <text x="50" y="24" style="font-style: roman; font-size: 8pt; fill: rgb(0,0,0);">3 </text>
        <text x="60" y="32" style="font-style: roman; font-size: 12pt; fill: rgb(0,0,0);">- </text>
        <text x="68" y="32" style="font-style: italic; font-size: 12pt; fill: rgb(0,0,0);">a </text>
        <text x="78" y="32" style="font-style: italic; font-size: 12pt; fill: rgb(0,0,0);">x </text>
    </svg>

    <!-- SVG Element 2 -->
    <svg id="reason0" width="88" height="16" viewBox = "0 0 88 16" xmlns="http://www3.org/2000/svg" style="position:absolute;left: 400px; top:16;">
        <text x="0" y="13" style="font-style: roman; font-size: 12pt; fill: rgb(0,255,0);">the problem </text>
    </svg>

</div>

<script>
    // JavaScript functions for button actions
    // Initialize the default scale factor
    var scaleFactor = 1.2;
	function SmallerType() {
	  // Check if it's already at the maximum size
	  
	    // Get the SVG container
	    var svgContainer = document.getElementById('svgContainer');

	    // Loop over all SVG elements within the container
	    var svgElements = svgContainer.getElementsByTagName('svg');
	    for (var i = 0; i < svgElements.length; i++) {
	      var svg = svgElements[i];

	      // Retrieve the current width and height as numbers
	      var currentWidth = parseFloat(svg.getAttribute('width'));
	      var currentHeight = parseFloat(svg.getAttribute('height'));
		  var currentTop = parseFloat(svg.getAttribute('top'));

	      // Calculate the new width and height based on the scale factor
	      var newWidth = currentWidth / scaleFactor;
	      var newHeight = currentHeight/ scaleFactor;
		  var newTop = currentTop/ scaleFactor;
		  svg.setAttribute('width', newWidth);
		  svg.setAttribute('height', newHeight);
		  svg.setAttribute('top', newTop);
         // Don't change the viewBox

	    
	  }
	}

    function LargerType() {
  	 

  	    // Get the SVG container
  	    var svgContainer = document.getElementById('svgContainer');

  	    // Loop over all SVG elements within the container
  	    var svgElements = svgContainer.getElementsByTagName('svg');
  	    for (var i = 0; i < svgElements.length; i++) {
  	      var svg = svgElements[i];

  	      // Retrieve the current width and height as numbers
  	      var currentWidth = parseFloat(svg.getAttribute('width'));
  	      var currentHeight = parseFloat(svg.getAttribute('height'));
		  var currentTop = parseFloat(svg.getAttribute('top'));

  	      // Calculate the new width and height based on the scale factor
  	      var newWidth = currentWidth * scaleFactor;
  	      var newHeight = currentHeight * scaleFactor;
		  var newTop = currentTop * scaleFactor;
		  svg.setAttribute('width', newWidth);
		  svg.setAttribute('height', newHeight);
		  svg.setAttribute('top', newTop);
  	      // Don't change the viewBox

  	    
  	  }
    }

    function AutoStep() {
        // Implement action for Auto Step
        console.log("Auto Step clicked");
    }
</script>

</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists