我想我需要一些幫助來使用HTML、Javascript和CSS中的viewPort和viewBox概念，這對我來說是新的，(如果可能的話，不需要額外的庫，因為我需要為我的ESP8266服務器占用很小的空間)。 我試圖實現的是操縱一個svg圖像，用EasyEDA創建的示意圖，并在該區域的邊界放大/縮小，移動和剪輯。 直到現在，在研究了網絡上的許多文檔以及youTube視頻之后，我仍然不能做到我上面描述的，我不知道在哪里放置視圖框和/或視口指令來實現它。 為了完整起見，我上傳了完整的代碼和svg，但這只是使用這個圖的一小部分。 此時，這三個部分在一個對話框中顯示在彼此下面，而不是彼此白色，不知道為什么，所以一些幫助將被感激。

// The JavaScript code - MainPage only

const Version = "My Schematic Version R01";

// Javascript Main Page & SideNav

// Perform Send from WebPage to ESP8266 - Menu - ResetAll Click
function ResetAll() {}

// Perform Send from WebPage to ESP8266 - Menu - ResetWiFi Click
function ResetWifi() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearRV Click
function ClearRV() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearCI Click
function ClearCI() {}

// Perform Send from WebPage to ESP8266 - Menu - ClearAll Click
function ClearAll() {}

// Perform Send from WebPage to ESP8266 - Menu - About & Help Click
function AboutOpen() {
  // Open het Venster in Modal Mode
  document.getElementById("myAboutDialog").showModal();
  // Plaats de Scrollbar aan het begin van het Venster
  document.getElementById("myAboutDialog").scrollTo(0, 0);
}

function AboutClose() {
  // Sluit het Modal Venster
  document.getElementById("myAboutDialog").close();
}

function Startup() {
  document.getElementById("Vers_Info").innerHTML = Version;
}

// The JavaScript code - Manipulation of the Schematic Diagram
const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");

console.log(svgImage.clientWidth);
console.log(svgImage.clientHeight);

var viewBox = { x: 0, y: 0, w: svgImage.clientWidth, h: svgImage.clientHeight };
svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
const svgSize = { w: svgImage.clientWidth, h: svgImage.clientHeight };
var isPanning = false;
var startPoint = { x: 0, y: 0 };
var endPoint = { x: 0, y: 0 };
var scale = 1;

svgContainer.onmousewheel = function (e) {
  e.preventDefault();
  var w = viewBox.w;
  var h = viewBox.h;
  var mx = e.offsetX; // mouse x
  var my = e.offsetY; // mouse y
  var dw = w * Math.sign(e.deltaY) * 0.05;
  var dh = h * Math.sign(e.deltaY) * 0.05;
  var dx = (dw * mx) / svgSize.w;
  var dy = (dh * my) / svgSize.h;
  viewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w - dw, h: viewBox.h - dh };
  scale = svgSize.w / viewBox.w;
  zoomValue.innerText = `${Math.round(scale * 100) / 100}`;
  svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);

  console.log(viewBox.x);
  console.log(viewBox.y);
  console.log(viewBox.w);
  console.log(viewBox.h);
};

svgContainer.onmousedown = function (e) {
  isPanning = true;
  startPoint = { x: e.x, y: e.y };

  console.log(e.x);
  console.log(e.x);
};

svgContainer.onmousemove = function (e) {
  if (isPanning) {
    endPoint = { x: e.x, y: e.y };
    var dx = (startPoint.x - endPoint.x) / scale;
    var dy = (startPoint.y - endPoint.y) / scale;
    var movedViewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w, h: viewBox.h };
    svgImage.setAttribute("viewBox", `${movedViewBox.x} ${movedViewBox.y} ${movedViewBox.w} ${movedViewBox.h}`);

    console.log(movedViewBox.x);
    console.log(movedViewBox.y);
    console.log(movedViewBox.w);
    console.log(movedViewBox.h);
  }
};

svgContainer.onmouseup = function (e) {
  if (isPanning) {
    endPoint = { x: e.x, y: e.y };
    var dx = (startPoint.x - endPoint.x) / scale;
    var dy = (startPoint.y - endPoint.y) / scale;
    viewBox = { x: viewBox.x + dx, y: viewBox.y + dy, w: viewBox.w, h: viewBox.h };
    svgImage.setAttribute("viewBox", `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
    isPanning = false;

    console.log(viewBox.x);
    console.log(viewBox.y);
    console.log(viewBox.w);
    console.log(viewBox.h);
  }
};

svgContainer.onmouseleave = function (e) {
  isPanning = false;
};

/* Styles for first Page & Dialog */

/* Styles used in the Body */
body {
  text-align: center;
  top: 0;
  left: 0;
  min-width: 1000px;
  width: 1000px;
  height: 350px;
}

#btnSysInfo {
  bottom: 50%;
  background-color: #42d1f5;
  border: none;
  color: white;
  padding: 8px 8px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 18px;
  margin: 2px;
  cursor: pointer;
  width: 90px;
  height: 55px;
  outline: auto;
  outline-color: black;
}

/* Uitschuif Menu */
#myMenu a {
  position: absolute;
  left: -240px;
  transition: 0.3s;
  padding: 8px;
  width: 275px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  border-radius: 0 5px 5px 0;
  outline: auto;
  outline-color: black;
}

#myMenu a:hover {
  left: 0;
}

#ResetALL {
  top: 35px;
  background-color: #ff0202;
}

#ResetWiFi {
  top: 75px;
  background-color: #ff7b00;
}

#ClearDebugRV {
  top: 115px;
  background-color: #04aa6d;
}

#ClearDebugCI {
  top: 155px;
  background-color: #04aa6d;
}

#ClearDebugALL {
  top: 195px;
  background-color: #2196f3;
}

#About {
  top: 235px;
  background-color: #1500ff;
}

#myAboutDialog {
  position: relative;
  top: 0;
  left: 0;
  border-radius: 10px;
  background-color: white;
  max-width: 85%;
  max-height: 85%;
}

/* Close Dialog Button */
#AboutClose {
  background-color: #196f3d;
  border: none;
  color: white;
  padding: 8px 8px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 18px;
  margin: 2px;
  cursor: pointer;
  width: 100%;      /* of the dialog width */
  height: 43px;
  outline: auto;
  outline-color: black;
}

#AboutClose:active {
  outline: 0;
  width: 113px;
  height: 46px;
}

#topRect {
  width: 97%;
  height: 25px;
  fill: rgb(252, 183, 57);
  stroke-width: 2;
  stroke: rgb(0, 0, 0);
}

#topRectTxt {
  fill: blue;
  font-weight: bold;
}

#botRect {
  width: 97%;
  height: 100%;
  fill: none;
  stroke-width: 2;
  stroke: rgb(0, 0, 0);
}

/* Extra Styles for Dialog Box */
.dialogBox {
  /* The area wherein to manipulate */
  border: 2px solid blue;
  width: 800px;
  height: 400px;
}

<!DOCTYPE html>
<html>
  <!-- Uncomment line below to use the 5 sec. refresh in the browser.. -->
  <!-- <meta http-equiv="refresh" content="5" /> -->

  <head>
    <!-- Tabblad Title in the browser -->
    <title>Scroll_Zoom_Pan_2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />

    <!-- !!!! REMARK Filenames are CASE-SENSITIVE !!!! -->
    <!-- Download the FavIcon File -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <!-- Download the Stylesheet File -->
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <!-- ! Don't load the Javascript File HERE ! -->

    <!-- ! Only Load, Don't Show the object NOW (Schematic Diagram) !!! -->
    <object id="svgImage" src="pict_2.svg" alt="Schematic" width="800" height="400">

  </head>

  <body onload="Startup()">
    <header>
      <h2>
        <title>Example code</title>
      </h2>
    </header>
    
    <!-- !!!! Prepare of the About & Help Dialog !!!! -->
    <dialog id="myAboutDialog" class="myAboutDialog">
      <h2>ESP8266 Monitoring Device ? 2023</h2>
      
      <!-- Display the Website Versie Info (= const in the .js-file) -->
      <h4 id="Vers_Info"></h4> 
      
      <h3>About</h3>
      <p style="text-align: left;">Lorem Ipsum (afgekort: lipsum) is de benaming van een tekst die vaak door drukkers, zetters, grafisch ontwerpers en dergelijke gebruikt wordt om te kijken hoe een tekst of lettertype eruit ziet, bijvoorbeeld in letterproeven, op een webpagina of op een kaft van een boek. De standaardversie van het Lorem Ipsum stamt uit circa 1500 en begint als volgt:</p>
      <h3>Help</h3>
      <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <!-- !!!! Displaying and manipulating the Schematic diagram !!!! -->
      <!-- !!!!   ==> This is where the magic shoud happen <==    !!!! -->
      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <div>
        <span id="zoomValue">1</span>

        <svg width="100%" height="100%">
          <!-- The topRect with Text -->
          <rect id="topRect" class="topRect" />
          <text id="topRectTxt" class="topRectTxt" x="10" y="17">Mouse Click = Grab & Move Diagram</text>
          <text id="topRectTxt" class="topRectTxt" x="300" y="17">Mouse Scroll = Zoom IN / OUT</text>

          <!-- The botRect -->
          <rect id="botRect" class="botRect" />
          <br>

          <!-- botRect With ViewBox inside -->
          <div id="svgContainer" class="svgContainer" width="800" height="400" >
            <!-- viewBox="0 0 500 250" (for now) param 1 & 2 for panning (to display start position), param 3 & 4 for zooming in / out -->
            <svg class="dialogBox" preserveAspectRatio="none" viewBox="0 0 800 400">   
              <!-- the ViewBox with picture -->
              <img id="svgImage" class="svgImage" src="pict_2.svg" alt="Schematic" width="800" height="400" > 
            </svg>
          </div>

        </svg>
      </div>

      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
      <!-- !!!! Displaying and manipulating the Schematic diagram !!!! -->
      <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->



      <h3>Explaining the Diagram</h3>
      <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
      <p><b>And lots of more text</b></p>
      <br>
      <br>
      <!-- Click OR Use the "Esc" button to close the Modal window -->
      <button class="AboutClose" id="AboutClose" onclick="AboutClose()">Close Dialog</button>
    </dialog> 

    <main>
      <!-- The HTML Main (Page) Menu [ESP8266 Monitoring Device] -->
      <div style="text-align: left">
        <table
          id="MainGenCnt_table"
          cellpadding="3"
          cellspacing="1"
          style="
            box-sizing: border-box;
            vertical-align: bottom;
            position: relative;
            display: inline-table;
            width: 1000px;
            height: 200px;
            min-width: 1000px;
            background: none;
            table-layout: fixed;
            border: 1px solid #8c8c8c;
          "
        >
          <tr>
            <!-- Bottom row - Debug windows -->
            <td
              width="50%"
              height="59px"
              style="text-align: center; vertical-align: top; overflow: hidden" >
              <!-- Bottom Left- 1 & 2 -->
              <table 
                width="100%"
                height="59px"
                style="text-align: center; vertical-align: top; overflow: hidden" >
                <tr>
                  <!-- Bottom Left- 1 -->
                  <td width="20%"
                    style="text-align: centre; vertical-align: top;">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_RV"
                      >
                      Menu
                    </label>
                    <div id="myMenu" class="sidenav" style="text-align: left">
                      <a id="ResetALL" onclick="ResetAll()">Reset ALL Boards</a>
                      <a id="ResetWiFi" onclick="ResetWifi()">ReConfig WiFi Setting</a>
                      <a id="ClearDebugRV" onclick="ClearRV()">Clear Debug Read Values</a>
                      <a id="ClearDebugCI" onclick="ClearCI()">Clear Debug CommandInfo</a>
                      <a id="ClearDebugALL" onclick="ClearAll()">Clear ALL Debug Windows</a>
                      <a id="About" onclick="AboutOpen()">About & Help</a>
                    </div>
                  </td>

                  <!-- Bottom Left- 2 -->
                  <td width="80%">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_RV"
                      >Debug Read & Write Values
                    </label
                    >
                    <textarea class="DebRV" id="DebRV" name="DebRV" cols="50" rows="15"></textarea> 
                  </td>
                </tr>
              </table>
            </td>

            <td
              width="50%"
              height="59px"
              style="text-align: center; vertical-align: top; overflow: hidden">
              <!-- Bottom Right- 3 & 4 -->
              <table 
                width="100%"
                height="59px"
                style="text-align: center; vertical-align: top; overflow: hidden" >
                <tr>
                  <!-- Bottom Right- 3 -->
                  <td width="80%">
                    <label
                      style="font-size: 20px; font-weight: 700; color: #ff00aa"
                      for="Deb_CI">Debug Command Info
                    </label>
                    <textarea class="DebCI" id="DebCI" name="DebCI" cols="50" rows="15"></textarea>
                  </td>

                  <!-- Bottom Right- 4 -->
                  <td width="20%"
                    style="text-align: centre; vertical-align: top;">
                    <table>
                      <tr
                        height="80%"
                        style="vertical-align: top; overflow: hidden">
                        <label
                          style="font-size: 20px; font-weight: 700; color: #ff00aa"
                          for="BattCap">BattCap
                        </label>
                        <br>
                        <br>
                        <br>
                        <br>
                        <label
                          style="font-size: 20px; font-weight: 700; color: #8000ff">
                          <span id="battcap"></span>
                        </label>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <hr>
                      </tr>
                      <tr                    
                        height="20%"
                        style="vertical-align: bottom; overflow: hidden">
                        <!-- Open the sys_info page in a new Tab Page of the same browser wundow -->
                        <form action="sys_info.html" method="get" target="_blank">
                          <button class="btnSysInfo" id="btnSysInfo">Systeem Info</button>
                        </form>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </main>

    <footer>
      <!-- Display the Footer of the Web Page -->
    </footer>

  </body>
</html>