Update implementation to account for WebKit bug

getScreenCTM() on WebKit does not reflect transformations applied to an ancestor (see bug https://bugs.webkit.org/show_bug.cgi?id=209220), so instead of transforming the root <svg> element, we can only transform a child element

public/assets/css/style.css

@@ -1,40 +1,17 @@
 body {
   text-align: center;
-  max-width: 100vw;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
 }
 
-.container {
+object {
   padding: 0;
-  max-width: 586.033px;
-  max-height: 586.033px;
-  margin: 0 auto;
-  overflow: hidden;
+  margin: 5px;
   border: 1px solid steelblue;
   background-color: gray;
-}
-
-img, object {
   touch-action: none;
-}
-
-img {
-  max-width: 100%;
-  border: 1px solid silver;
-  transform: scale(0.9);
-}
-
-.container object, .container.switch img {
   display: block;
-}
-
-.container img, .container.switch object {
-  display: none;
-}
-
-button .button-text.raster, button.switch .button-text.svg {
-  display: none;
-}
-
-button.switch .button-text.raster {
-  display: inline;
+  min-height: 0;
 }

public/assets/images/image.svg

@@ -1,22 +1,20 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<?xml version="1.0" standalone="yes"?>
 <svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <style>
-    svg {
-      overflow: hidden;
-      border: 1px solid silver;
-      transform: scale(0.9);
-    }
-
     circle, rect {
       fill-opacity: 0.9;
-      filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, .5));
     }
   </style>
+
+  <g>
+    <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/>
+  </g>
+
   <script type="text/javascript">//<![CDATA[
     const svgns = 'http://www.w3.org/2000/svg',
       svg = document.querySelector('svg'),
+      group = svg.querySelector('g'),
+      pointerEl = svg.querySelector('#pointer'),
       { x: vbX, y: vbY, width: vbWidth, height: vbHeight } = svg.viewBox.baseVal,
 
       shapeCount = 100,
@@ -103,6 +101,6 @@
 
     [...Array(shapeCount)]
       .map(() => getRandomFillAndStrokeVals())
-      .forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal)));
+      .forEach(fillAndStrokeVal => pointerEl.before(getRandomShape(fillAndStrokeVal)));
   //]]></script>
 </svg>