CodePen Embed - SVG viewBox

<!-- 
1. Tutorial: https://wattenberger.com/guide/scaling-svg
2. Author: @wattenberger http://twitter.com/wattenberger
-->
<div class="ScalingSvg">
  <div class="TelescopeExplorable">
    <div class="actions">
      <div class="control__wrapper">
        <div class="control">
          <label for="x">x:</label>
          <input type="range" name="x" id="x" min="-100" max="100" step="1" value="0">
          <span id="x__val">0</span>
        </div>
        <div class="control">
          <label for="y">y:</label>
          <input type="range" name="y" id="y" min="-100" max="100" step="1" value="0">
          <span id="y__val">0</span>
        </div>
        <div class="control">
          <label for="width">width:</label>
          <input type="range" name="width" id="width" min="0" max="300" step="1" value="300">
          <span id="width__val">300</span>
        </div>
        <div class="control">
          <label for="height">height:</label>
          <input type="range" name="height" id="height" min="0" max="300" step="1" value="300">
          <span id="height__val">300</span>
        </div>
      </div>
      <div class="value__box">
        viewBox:"<span id="view_x">0</span> <span id="view_y">0</span> <span id="view_width">300</span> <span id="view_height">300</span>"
      </div>
    </div>

    <div class="TelescopeExplorable__svg">
      <div class="TelescopeExplorable__svg__corner TelescopeExplorable__svg__corner--nw" id="coordinates__1">[0, 0]</div>
      <div class="TelescopeExplorable__svg__corner TelescopeExplorable__svg__corner--ne" id="coordinates__2">[300, 0]</div>
      <div class="TelescopeExplorable__svg__corner TelescopeExplorable__svg__corner--sw" id="coordinates__3">[0, 300]</div>
      <div class="TelescopeExplorable__svg__corner TelescopeExplorable__svg__corner--se" id="coordinates__4">[300, 300]</div><svg viewBox="0 0 300 300" id="svg__viewbox">
        <defs>
          <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"></path>
          </pattern>
        </defs>
        <polygon transform="scale(4.2)" points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="#9980FA"></polygon>
        <rect width="100" height="100" fill="none" stroke="white"></rect><text x="50" y="50" style="text-anchor: middle; font-size: 10px;">[50, 50]</text>
        <circle cx="50" cy="50" r="1"></circle>
        <rect x="-200" y="-200" width="600" height="600" fill="url(#grid)" opacity="0.5"></rect>
      </svg>
    </div>
  </div>
</div>

$tc: #2c3e50;
$a1: #9980fa;
$a2: #12cbc4;
$a3: #ffc312;
$a4: #e6672d;
$a5: #fb66b8;

$grey1: #f2f2f7;
$grey2: #dbdbe7;
$grey3: #bdbdcf;
$grey4: #8b8ba7;
$grey5: #6a6a85;

$text-color: #292e31;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  aling-items: center;
}

.ScalingSvg {
  width: 100%;
  height: 100%;
  position: relative;
  background: #0b0a27;
  background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  .TelescopeExplorable {
    position: relative;
    display: flex;
    // max-width: 50em;
    width: 100%;
    z-index: 100;
    height: 100%;
    justify-content: center;
    align-items: center;

    &__svg {
      position: relative;
      flex: 0 0 20em;
      height: 20em;
      background: #0b0a27;
      // border: 1px solid pink;
      transform: perspective(30em) rotateY(-20deg);

      svg {
        height: 100%;
        width: 100%;
      }

      &__corner {
        position: absolute;
        color: white;
        font-feature-settings: "tnum" 1;

        &--nw {
          top: -1.9em;
          left: -2em;
        }
        &--ne {
          top: -1.9em;
          right: -2em;
        }
        &--sw {
          bottom: -1.9em;
          left: -2em;
        }
        &--se {
          bottom: -1.9em;
          right: -2em;
        }

        @media (max-width: 650px) {
          &--se,
          &--sw {
            color: black;
          }
        }
      }
    }
  }
}

.actions {
  display: flex;
  flex-direction: column;
  padding: 2em;
  background: #0b0a27;
  color: #fff;
  border-radius: 1em;
  transform: rotate(-6deg);
}

.control {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

label {
  width: 3em;
  text-align: right;
}

input[type="range"] {
  width: 10em;
  margin: 0 1em;
  cursor: pointer;
}

.control span {
  font-feature-settings: "tnum" 1;
  width: 2.5em;
  text-align: right;
}

.value__box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-feature-settings: "tnum" 1;
  padding-top: 1em;
}

.value__box span {
  margin: 0 5px;
}

.value__box span:nth-child(1) {
  color: #f44336;
}

.value__box span:nth-child(2) {
  color: #2196f3;
}

.value__box span:nth-child(3) {
  color: #cddc39;
}

.value__box span:nth-child(4) {
  color: #39d1dc;
}

View Compiled

const xRangeElement = document.getElementById("x");
const yRangeElement = document.getElementById("y");
const widthRangeElement = document.getElementById("width");
const heightRangeElement = document.getElementById("height");
const xVal = document.getElementById("x__val");
const yVal = document.getElementById("y__val");
const widthVal = document.getElementById("width__val");
const heightVal = document.getElementById("height__val");
const viewBoxXVal = document.getElementById("view_x");
const viewBoxYVal = document.getElementById("view_y");
const viewBoxWidthVal = document.getElementById("view_width");
const viewBoxHeightVal = document.getElementById("view_height");
const coordinatesOneVal = document.getElementById("coordinates__1");
const coordinatesTwoVal = document.getElementById("coordinates__2");
const coordinatesThreeVal = document.getElementById("coordinates__3");
const coordinatesFourVal = document.getElementById("coordinates__4");

const svgElement = document.getElementById("svg__viewbox");

xRangeElement.addEventListener("change", (evt) => {
  const rangeVal_x = evt.target.value;
  const rangeVal_y = yRangeElement.value;
  const rangeVal_width = widthRangeElement.value;
  const rangeVal_height = heightRangeElement.value;

  const coordinatesOneVal_x = Number(rangeVal_x);
  const coordinatesOneVal_y = Number(rangeVal_y);

  const coordinatesTwoVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesTwoVal_y = Number(rangeVal_y);

  const coordinatesThreeVal_x = Number(rangeVal_x);
  const coordinatesThreeVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  const coordinatesFourVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesFourVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  xVal.textContent = rangeVal_x;

  coordinatesOneVal.textContent = `[${coordinatesOneVal_x} ${coordinatesOneVal_y}]`;
  coordinatesTwoVal.textContent = `[${coordinatesTwoVal_x} ${coordinatesTwoVal_y}]`;
  coordinatesThreeVal.textContent = `[${coordinatesThreeVal_x} ${coordinatesThreeVal_y}]`;
  coordinatesFourVal.textContent = `[${coordinatesFourVal_x} ${coordinatesFourVal_y}]`;

  viewBoxXVal.textContent = rangeVal_x;
  viewBoxYVal.textContent = rangeVal_y;
  viewBoxWidthVal.textContent = rangeVal_width;
  viewBoxHeightVal.textContent = rangeVal_height;

  svgElement.setAttribute(
    "viewBox",
    `${rangeVal_x} ${rangeVal_y} ${rangeVal_width} ${rangeVal_height}`
  );
});

yRangeElement.addEventListener("change", (evt) => {
  const rangeVal_x = xRangeElement.value;
  const rangeVal_y = evt.target.value;
  const rangeVal_width = widthRangeElement.value;
  const rangeVal_height = heightRangeElement.value;

  const coordinatesOneVal_x = Number(rangeVal_x);
  const coordinatesOneVal_y = Number(rangeVal_y);

  const coordinatesTwoVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesTwoVal_y = Number(rangeVal_y);

  const coordinatesThreeVal_x = Number(rangeVal_x);
  const coordinatesThreeVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  const coordinatesFourVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesFourVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  yVal.textContent = rangeVal_y;

  coordinatesOneVal.textContent = `[${coordinatesOneVal_x} ${coordinatesOneVal_y}]`;
  coordinatesTwoVal.textContent = `[${coordinatesTwoVal_x} ${coordinatesTwoVal_y}]`;
  coordinatesThreeVal.textContent = `[${coordinatesThreeVal_x} ${coordinatesThreeVal_y}]`;
  coordinatesFourVal.textContent = `[${coordinatesFourVal_x} ${coordinatesFourVal_y}]`;

  viewBoxXVal.textContent = rangeVal_x;
  viewBoxYVal.textContent = rangeVal_y;
  viewBoxWidthVal.textContent = rangeVal_width;
  viewBoxHeightVal.textContent = rangeVal_height;

  svgElement.setAttribute(
    "viewBox",
    `${rangeVal_x} ${rangeVal_y} ${rangeVal_width} ${rangeVal_height}`
  );
});

widthRangeElement.addEventListener("change", (evt) => {
  const rangeVal_x = xRangeElement.value;
  const rangeVal_y = yRangeElement.value;
  const rangeVal_width = evt.target.value;
  const rangeVal_height = heightRangeElement.value;

  const coordinatesOneVal_x = Number(rangeVal_x);
  const coordinatesOneVal_y = Number(rangeVal_y);

  const coordinatesTwoVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesTwoVal_y = Number(rangeVal_y);

  const coordinatesThreeVal_x = Number(rangeVal_x);
  const coordinatesThreeVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  const coordinatesFourVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesFourVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  widthVal.textContent = rangeVal_width;

  coordinatesOneVal.textContent = `[${coordinatesOneVal_x} ${coordinatesOneVal_y}]`;
  coordinatesTwoVal.textContent = `[${coordinatesTwoVal_x} ${coordinatesTwoVal_y}]`;
  coordinatesThreeVal.textContent = `[${coordinatesThreeVal_x} ${coordinatesThreeVal_y}]`;
  coordinatesFourVal.textContent = `[${coordinatesFourVal_x} ${coordinatesFourVal_y}]`;

  viewBoxXVal.textContent = rangeVal_x;
  viewBoxYVal.textContent = rangeVal_y;
  viewBoxWidthVal.textContent = rangeVal_width;
  viewBoxHeightVal.textContent = rangeVal_height;

  svgElement.setAttribute(
    "viewBox",
    `${rangeVal_x} ${rangeVal_y} ${rangeVal_width} ${rangeVal_height}`
  );
});

heightRangeElement.addEventListener("change", (evt) => {
  const rangeVal_x = xRangeElement.value;
  const rangeVal_y = yRangeElement.value;
  const rangeVal_width = widthRangeElement.value;
  const rangeVal_height = evt.target.value;

  const coordinatesOneVal_x = Number(rangeVal_x);
  const coordinatesOneVal_y = Number(rangeVal_y);

  const coordinatesTwoVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesTwoVal_y = Number(rangeVal_y);

  const coordinatesThreeVal_x = Number(rangeVal_x);
  const coordinatesThreeVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  const coordinatesFourVal_x = Number(rangeVal_x) + Number(rangeVal_width);
  const coordinatesFourVal_y = Number(rangeVal_y) + Number(rangeVal_height);

  heightVal.textContent = rangeVal_height;

  coordinatesOneVal.textContent = `[${coordinatesOneVal_x} ${coordinatesOneVal_y}]`;
  coordinatesTwoVal.textContent = `[${coordinatesTwoVal_x} ${coordinatesTwoVal_y}]`;
  coordinatesThreeVal.textContent = `[${coordinatesThreeVal_x} ${coordinatesThreeVal_y}]`;
  coordinatesFourVal.textContent = `[${coordinatesFourVal_x} ${coordinatesFourVal_y}]`;

  viewBoxXVal.textContent = rangeVal_x;
  viewBoxYVal.textContent = rangeVal_y;
  viewBoxWidthVal.textContent = rangeVal_width;
  viewBoxHeightVal.textContent = rangeVal_height;

  svgElement.setAttribute(
    "viewBox",
    `${rangeVal_x} ${rangeVal_y} ${rangeVal_width} ${rangeVal_height}`
  );
});

This Pen is owned by 大漠 on CodePen.

See more by @airen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.