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/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>