fix: use clientWidth/clientHeight instead of getBoundingClientRect (#1395)

* fix: use clientWidth/clientHeight instead of getBoundingClientRect

* fix(test): properly mock clientWidth and clientHeight

Author: evertheylen

src/svg/Svg.ts

@@ -330,19 +330,19 @@ export class Svg {
   }
 
   /**
-   * Get element height using `getBoundingClientRect`
+   * Get element height using `clientHeight`
    * @return The elements height in pixels
    */
   height() {
-    return this._node.getBoundingClientRect().height;
+    return this._node.clientHeight;
   }
 
   /**
-   * Get element width using `getBoundingClientRect`
+   * Get element width using `clientWidth`
    * @return The elements width in pixels
    */
   width() {
-    return this._node.getBoundingClientRect().width;
+    return this._node.clientWidth;
   }
 
   /**

test/mock/dom.ts

@@ -42,8 +42,32 @@ export function mockDomRects() {
     bottom: 0,
     left: 0
   });
+
+  Object.defineProperties(SVGElement.prototype, {
+    clientWidth: {
+      configurable: true,
+      get: () => 500
+    },
+    clientHeight: {
+      configurable: true,
+      get: () => 500
+    }
+  });
 }
 
 export function destroyMockDomRects() {
   SVGElement.prototype.getBoundingClientRect = getBoundingClientRect;
+
+  // Redefine clientWidth and clientHeight properties from the prototype of SVGElement
+  const ElementPrototype = Object.getPrototypeOf(SVGElement.prototype);
+  Object.defineProperties(SVGElement.prototype, {
+    clientWidth: Object.getOwnPropertyDescriptor(
+      ElementPrototype,
+      'clientWidth'
+    )!,
+    clientHeight: Object.getOwnPropertyDescriptor(
+      ElementPrototype,
+      'clientHeight'
+    )!
+  });
 }