fabric 7.1.0 → 7.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {
@@ -63,7 +63,8 @@
     "local-server": "serve ./ -l tcp://localhost:8080",
     "lint": "eslint src extensions",
     "prettier:check": "prettier --check .",
-    "prettier:write": "prettier --write ."
+    "prettier:write": "prettier --write .",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -71,7 +72,7 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.37.0",
-    "@playwright/test": "^1.56.0",
+    "@playwright/test": "^1.58.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -79,26 +80,29 @@
     "@types/jsdom": "^21.1.7",
     "@types/micromatch": "^4.0.9",
     "@types/node": "^24.7.0",
-    "@vitest/browser-playwright": "^4.0.2",
-    "@vitest/coverage-v8": "^4.0.2",
-    "@vitest/ui": "^4.0.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "babel-plugin-transform-imports": "git+https://git@github.com/fabricjs/babel-plugin-transform-imports.git",
     "commander": "^14.0.1",
     "es-toolkit": "1.40.0",
     "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
     "inquirer": "^12.9.6",
+    "lint-staged": "^16.2.7",
     "micromatch": "^4.0.8",
     "nyc": "^17.1.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "ps-list": "^9.0.0",
     "rollup": "^4.52.4",
     "semver": "^7.7.3",
     "serve": "^14.2.5",
+    "tsc-files": "^1.1.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.0",
     "v8-to-istanbul": "^9.3.0",
-    "vitest": "^4.0.2",
+    "vitest": "^4.0.18",
     "westures": "^1.1.1"
   },
   "engines": {
@@ -153,5 +157,10 @@
   "optionalDependencies": {
     "canvas": "^3.2.0",
     "jsdom": "^26.1.0"
+  },
+  "lint-staged": {
+    "*.{js,md,css,ts,tsx,jsx,json}": "eslint --fix",
+    "*.{js,css,md,ts,tsx,jsx,json}": "prettier --write",
+    "**/*.ts !(**/*.spec.ts) !(**/*.test.ts) !(vitest*.ts)": "tsc-files --noEmit"
   }
 }

package/src/ClassRegistry.spec.ts

@@ -1,17 +1,16 @@
-import {
-  ClassRegistry,
-  classRegistry as genericClassRegistryInstance,
-  JSON,
-} from './ClassRegistry';
-import './shapes/Object/FabricObject';
+import type { ClassRegistry } from './ClassRegistry';
 
-import { describe, expect, beforeEach, it } from 'vitest';
+import { describe, expect, beforeEach, afterEach, it, vi } from 'vitest';
 
 describe('ClassRegistry', () => {
   let classRegistry: ClassRegistry;
-  beforeEach(() => {
+  beforeEach(async () => {
+    const { ClassRegistry } = await import('./ClassRegistry');
     classRegistry = new ClassRegistry();
   });
+  afterEach(() => {
+    vi.resetModules();
+  });
   it('will error if a class is request that is not registered', () => {
     expect(() => classRegistry.getClass('any')).toThrow(
       'No class registered for any',
@@ -57,30 +56,30 @@ describe('ClassRegistry', () => {
     expect(resolved, 'resolved different classes').not.toBe(resolvedSvg);
   });
   it('legacy resolution preparation', async () => {
-    genericClassRegistryInstance[JSON].delete('rect');
-    genericClassRegistryInstance[JSON].delete('i-text');
-    genericClassRegistryInstance[JSON].delete('activeSelelection');
-    genericClassRegistryInstance[JSON].delete('object');
-    expect(genericClassRegistryInstance.has('rect')).toBe(false);
-    expect(genericClassRegistryInstance.has('i-text')).toBe(false);
-    expect(genericClassRegistryInstance.has('activeSelection')).toBe(false);
-    expect(genericClassRegistryInstance.has('object')).toBe(false);
+    const { classRegistry: freshRegistry } = await import('./ClassRegistry');
+
+    // Registry should be empty before any shape classes are imported
+    expect(freshRegistry.has('rect')).toBe(false);
+    expect(freshRegistry.has('i-text')).toBe(false);
+    expect(freshRegistry.has('activeSelection')).toBe(false);
+    expect(freshRegistry.has('object')).toBe(false);
   });
   it('legacy resolution', async () => {
+    const { classRegistry: freshRegistry } = await import('./ClassRegistry');
     const { Rect } = await import('./shapes/Rect');
     const { IText } = await import('./shapes/IText/IText');
     const { ActiveSelection } = await import('./shapes/ActiveSelection');
     // const { FabricObject } = await import('./shapes/Object/FabricObject');
     expect(
-      genericClassRegistryInstance.getClass('rect'),
+      freshRegistry.getClass('rect'),
       'resolves Rect class correctly',
     ).toBe(Rect);
     expect(
-      genericClassRegistryInstance.getClass('i-text'),
+      freshRegistry.getClass('i-text'),
       'resolves IText class correctly',
     ).toBe(IText);
     expect(
-      genericClassRegistryInstance.getClass('activeSelection'),
+      freshRegistry.getClass('activeSelection'),
       'resolves ActiveSelection class correctly',
     ).toBe(ActiveSelection);
     // expect(

package/src/EventTypeDefs.ts

@@ -108,8 +108,9 @@ interface TEventWithTarget<E extends Event = TPointerEvent> extends TEvent<E> {
   target: FabricObject;
 }
 
-export interface BasicTransformEvent<E extends Event = TPointerEvent>
-  extends TEvent<E> {
+export interface BasicTransformEvent<
+  E extends Event = TPointerEvent,
+> extends TEvent<E> {
   transform: Transform;
   /* This pointer is usually a scenePoint. It isn't in the case of actions inside groups,
    * where it becomes a point relative to the group center
@@ -163,8 +164,9 @@ type CanvasModificationEvents = {
   'object:modified': ModifiedEvent;
 };
 
-export interface TPointerEventInfo<E extends TPointerEvent = TPointerEvent>
-  extends TEvent<E> {
+export interface TPointerEventInfo<
+  E extends TPointerEvent = TPointerEvent,
+> extends TEvent<E> {
   target?: FabricObject;
   subTargets?: FabricObject[];
   transform?: Transform | null;
@@ -172,8 +174,9 @@ export interface TPointerEventInfo<E extends TPointerEvent = TPointerEvent>
   viewportPoint: Point;
 }
 
-interface SimpleEventHandler<T extends Event = TPointerEvent>
-  extends TEvent<T> {
+interface SimpleEventHandler<
+  T extends Event = TPointerEvent,
+> extends TEvent<T> {
   target?: FabricObject;
   subTargets: FabricObject[];
 }
@@ -288,10 +291,7 @@ export interface MiscEvents {
 }
 
 export interface ObjectEvents
-  extends ObjectPointerEvents,
-    DnDEvents,
-    MiscEvents,
-    ObjectModificationEvents {
+  extends ObjectPointerEvents, DnDEvents, MiscEvents, ObjectModificationEvents {
   // selection
   selected: Partial<TEvent> & {
     target: FabricObject;
@@ -305,6 +305,7 @@ export interface ObjectEvents
 
   // erasing
   'erasing:end': { path: FabricObject };
+  'before:render': { ctx: CanvasRenderingContext2D };
 }
 
 export interface StaticCanvasEvents extends CollectionEvents {
@@ -319,7 +320,8 @@ export interface StaticCanvasEvents extends CollectionEvents {
 }
 
 export interface CanvasEvents
-  extends StaticCanvasEvents,
+  extends
+    StaticCanvasEvents,
     CanvasPointerEvents,
     CanvasDnDEvents,
     MiscEvents,

package/src/Pattern/Pattern.spec.ts

@@ -187,4 +187,16 @@ describe('Pattern', () => {
     const obj = await Rect.fromObject(rectObj);
     expect(obj.fill instanceof Pattern).toBeTruthy();
   });
+
+  describe('attribute injection', () => {
+    it('escapes correctly the src', () => {
+      const pattern = new Pattern({
+        source: { src: '"><svg onload=alert(1)>', width: 10, height: 10 },
+      });
+      const svg = pattern.toSVG({ width: 100, height: 100 });
+      expect(svg).toContain(
+        'xlink:href="&quot;&gt;&lt;svg onload=alert(1)&gt;"',
+      );
+    });
+  });
 });

package/src/Pattern/Pattern.ts

@@ -12,6 +12,7 @@ import type {
   SerializedPatternOptions,
 } from './types';
 import { log } from '../util/internals/console';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * @see {@link http://fabric5.fabricjs.com/patterns demo}
@@ -177,12 +178,12 @@ export class Pattern {
           : ifNaN((patternSource as HTMLImageElement).height / height, 0);
 
     return [
-      `<pattern id="SVGID_${id}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
+      `<pattern id="SVGID_${escapeXml(id)}" x="${patternOffsetX}" y="${patternOffsetY}" width="${patternWidth}" height="${patternHeight}">`,
       `<image x="0" y="0" width="${
         (patternSource as HTMLImageElement).width
       }" height="${
         (patternSource as HTMLImageElement).height
-      }" xlink:href="${this.sourceToString()}"></image>`,
+      }" xlink:href="${escapeXml(this.sourceToString())}"></image>`,
       `</pattern>`,
       '',
     ].join('\n');

package/src/Shadow.ts

@@ -6,6 +6,7 @@ import { Point } from './Point';
 import type { FabricObject } from './shapes/Object/FabricObject';
 import type { TClassProperties } from './typedefs';
 import { uid } from './util/internals/uid';
+import { escapeXml } from './util/lang_string';
 import { pickBy } from './util/misc/pick';
 import { degreesToRadians } from './util/misc/radiansDegreesConversion';
 import { toFixed } from './util/misc/toFixed';
@@ -27,7 +28,6 @@ import { rotateVector } from './util/misc/vectors';
 
 (?:$|\s): This captures either the end of the line or a whitespace character. It ensures that the match ends either at the end of the string or with a whitespace character.
    */
-// eslint-disable-next-line max-len
 
 const shadowOffsetRegex = '(-?\\d+(?:\\.\\d*)?(?:px)?(?:\\s?|$))?';
 
@@ -105,7 +105,7 @@ export class Shadow {
    */
   declare nonScaling: boolean;
 
-  declare id: number;
+  declare id: number | string;
 
   static ownDefaults = shadowDefaultValues;
 
@@ -163,6 +163,7 @@ export class Shadow {
         degreesToRadians(-object.angle),
       ),
       BLUR_BOX = 20,
+      NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS,
       color = new Color(this.color);
     let fBoxX = 40,
       fBoxY = 40;
@@ -173,14 +174,14 @@ export class Shadow {
       fBoxX =
         toFixed(
           (Math.abs(offset.x) + this.blur) / object.width,
-          config.NUM_FRACTION_DIGITS,
+          NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
       fBoxY =
         toFixed(
           (Math.abs(offset.y) + this.blur) / object.height,
-          config.NUM_FRACTION_DIGITS,
+          NUM_FRACTION_DIGITS,
         ) *
           100 +
         BLUR_BOX;
@@ -192,19 +193,19 @@ export class Shadow {
       offset.y *= -1;
     }
 
-    return `<filter id="SVGID_${this.id}" y="-${fBoxY}%" height="${
+    return `<filter id="SVGID_${escapeXml(this.id)}" y="-${fBoxY}%" height="${
       100 + 2 * fBoxY
     }%" x="-${fBoxX}%" width="${
       100 + 2 * fBoxX
     }%" >\n\t<feGaussianBlur in="SourceAlpha" stdDeviation="${toFixed(
       this.blur ? this.blur / 2 : 0,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}"></feGaussianBlur>\n\t<feOffset dx="${toFixed(
       offset.x,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}" dy="${toFixed(
       offset.y,
-      config.NUM_FRACTION_DIGITS,
+      NUM_FRACTION_DIGITS,
     )}" result="oBlur" ></feOffset>\n\t<feFlood flood-color="${color.toRgb()}" flood-opacity="${color.getAlpha()}"/>\n\t<feComposite in2="oBlur" operator="in" />\n\t<feMerge>\n\t\t<feMergeNode></feMergeNode>\n\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n\t</feMerge>\n</filter>\n`;
   }
 

package/src/brushes/PencilBrush.spec.ts

@@ -2,9 +2,9 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { Canvas } from '../canvas/Canvas';
 import { PencilBrush } from './PencilBrush';
 import { parsePath } from '../util';
-import type { TPointerEvent } from '../EventTypeDefs';
 import { Path } from '../shapes/Path';
 import { Point } from '../Point';
+import { createPointerEvent } from '../../test/utils';
 
 describe('PencilBrush', () => {
   let canvas: Canvas;
@@ -55,12 +55,12 @@ describe('PencilBrush', () => {
 
       it('draws a point correctly', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
-        const pointer = canvas.getScenePoint({
-          ...e,
+        const e = createPointerEvent({
+          target: canvas.upperCanvasEl,
           clientX: 10,
           clientY: 10,
         });
+        const pointer = canvas.getScenePoint(e);
         brush.onMouseDown(pointer, { e });
         // @ts-expect-error -- protected
         const pathData = brush.convertPointsToSVGPath(brush._points);
@@ -72,12 +72,12 @@ describe('PencilBrush', () => {
 
       it('handles multiple coincident points', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
-        const pointer = canvas.getScenePoint({
-          ...e,
+        const e = createPointerEvent({
+          target: canvas.upperCanvasEl,
           clientX: 10,
           clientY: 10,
         });
+        const pointer = canvas.getScenePoint(e);
         brush.onMouseDown(pointer, { e });
         brush.onMouseMove(pointer, { e });
         brush.onMouseMove(pointer, { e });
@@ -95,7 +95,7 @@ describe('PencilBrush', () => {
 
       it('handles multiple non-coincident points', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -129,7 +129,7 @@ describe('PencilBrush', () => {
 
       it('handles points outside canvas', () => {
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -177,7 +177,7 @@ describe('PencilBrush', () => {
       it('limits points to canvas size when limitedToCanvasSize is true', () => {
         const brush = new PencilBrush(canvas);
         brush.limitedToCanvasSize = true;
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,
@@ -237,7 +237,7 @@ describe('PencilBrush', () => {
         });
 
         const brush = new PencilBrush(canvas);
-        const e = { target: canvas.upperCanvasEl } as unknown as TPointerEvent;
+        const e = createPointerEvent({ target: canvas.upperCanvasEl });
         const pointer = canvas.getScenePoint({
           ...e,
           clientX: 10,

package/src/canvas/Canvas-dispose.spec.ts

@@ -195,23 +195,24 @@ describe('Canvas dispose', () => {
 
     it('dispose edge case: `toCanvasElement` after dispose', async () => {
       const canvas = new CanvasClass(undefined, { renderOnAddRemove: false });
-      const testImageData = (colorByteVal: number) => {
+      const getAlphaValues = () => {
         return canvas
           .toCanvasElement()
           .getContext('2d')!
-          .getImageData(0, 0, 20, 20)
-          .data.filter((_, i) => i % 4 === 0)
-          .every((x) => x === colorByteVal);
+          .getImageData(10, 10, 20, 20)
+          .data.filter((_, i) => i % 4 === 3);
       };
+      const hasOpaquePixels = () => getAlphaValues().some((x) => x === 255);
+      const isFullyTransparent = () => getAlphaValues().every((x) => x === 0);
       canvas.add(
         makeRect({ fill: 'red', width: 20, height: 20, top: 10, left: 10 }),
       );
-      expect(testImageData(255), 'control').toBeTruthy();
+      expect(hasOpaquePixels(), 'control').toBeTruthy();
       canvas.disposed = true;
-      expect(testImageData(255), 'should render canvas').toBeTruthy();
+      expect(hasOpaquePixels(), 'should render canvas').toBeTruthy();
       canvas.destroyed = true;
       expect(
-        testImageData(0),
+        isFullyTransparent(),
         'should have disabled canvas rendering',
       ).toBeTruthy();
       canvas.destroyed = false;

package/src/canvas/Canvas.spec.ts

@@ -10,6 +10,7 @@ import type {
   MultiSelectionStacking,
   TPointerEvent,
 } from '../../fabric';
+import { createPointerEvent } from '../../test/utils';
 import {
   ActiveSelection,
   Circle,
@@ -862,9 +863,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(fired, 'event fired for each of 3 rects').toBe(3);
   });
@@ -885,9 +884,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(isFired, 'selection created fired').toBe(true);
     expect(
@@ -917,9 +914,7 @@ describe('Canvas', () => {
       deltaX: 5,
       deltaY: 5,
     });
-    canvas._onMouseUp({
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    canvas._onMouseUp(createPointerEvent({ target: canvas.upperCanvasEl }));
 
     expect(isFired, 'selection:created fired').toBe(true);
     expect(canvas.getActiveObject(), 'rect1 is set as activeObject').toBe(
@@ -1115,18 +1110,22 @@ describe('Canvas', () => {
     const rect = makeRect({ left: 0, top: 0 });
     canvas.add(rect);
 
-    const { target } = canvas.findTarget({
-      clientX: 5,
-      clientY: 5,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    const { target } = canvas.findTarget(
+      createPointerEvent({
+        clientX: 5,
+        clientY: 5,
+        target: canvas.upperCanvasEl,
+      }),
+    );
     expect(target, 'Should return the rect').toBe(rect);
 
-    const { target: target2 } = canvas.findTarget({
-      clientX: 30,
-      clientY: 30,
-      target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent);
+    const { target: target2 } = canvas.findTarget(
+      createPointerEvent({
+        clientX: 30,
+        clientY: 30,
+        target: canvas.upperCanvasEl,
+      }),
+    );
     expect(target2, 'Should not find target').toBeUndefined();
 
     canvas.remove(rect);
@@ -1897,16 +1896,15 @@ describe('Canvas', () => {
   });
 
   it('cleans up transform when discarding active object', () => {
-    const e = {
+    const e = createPointerEvent({
       clientX: 5,
       clientY: 5,
-      which: 1,
       target: canvas.upperCanvasEl,
-    };
+    });
     const target = makeRect();
     canvas.add(target);
     canvas.setActiveObject(target);
-    canvas._setupCurrentTransform(e as unknown as TPointerEvent, target, true);
+    canvas._setupCurrentTransform(e, target, true);
     expect(canvas._currentTransform, 'transform should be set').toBeTruthy();
 
     target.isMoving = true;
@@ -2221,11 +2219,11 @@ describe('Canvas', () => {
     const rect = new Rect({ left: 100, top: 100, width: 50, height: 50 });
     canvas.add(rect);
     const canvasOffset = canvas.calcOffset();
-    let eventStub = {
+    let eventStub = createPointerEvent({
       clientX: canvasOffset.left + 100,
       clientY: canvasOffset.top + 100,
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent;
+    });
     canvas.setActiveObject(rect);
     const targetCorner = rect.findControl(canvas.getViewportPoint(eventStub));
     rect.__corner = targetCorner ? targetCorner.key : undefined;
@@ -2237,11 +2235,11 @@ describe('Canvas', () => {
     expect(t.originX, 'no origin change for drag').toBe(rect.originX);
     expect(t.originY, 'no origin change for drag').toBe(rect.originY);
 
-    eventStub = {
+    eventStub = createPointerEvent({
       clientX: canvasOffset.left + rect.oCoords.tl.corner.tl.x + 1,
       clientY: canvasOffset.top + rect.oCoords.tl.corner.tl.y + 1,
       target: canvas.upperCanvasEl,
-    } as unknown as TPointerEvent;
+    });
     rect.__corner = rect.findControl(canvas.getViewportPoint(eventStub))!.key;
     canvas._setupCurrentTransform(eventStub, rect, false);
     t = canvas._currentTransform!;
@@ -2264,12 +2262,12 @@ describe('Canvas', () => {
     expect(t.originY, 'origin in opposite direction').toBe('bottom');
     expect(t.shiftKey, 'shift was not pressed').toBe(undefined);
 
-    eventStub = {
+    eventStub = createPointerEvent({
       clientX: canvasOffset.left + rect.left - 2 - rect.width / 2,
       clientY: canvasOffset.top + rect.top,
       target: canvas.upperCanvasEl,
       shiftKey: true,
-    } as unknown as TPointerEvent;
+    });
     rect.__corner = rect.findControl(canvas.getViewportPoint(eventStub))!.key;
     canvas._setupCurrentTransform(eventStub, rect, alreadySelected);
     t = canvas._currentTransform!;

package/src/canvas/CanvasOptions.ts

@@ -227,7 +227,8 @@ export interface CanvasEventsOptions {
 }
 
 export interface CanvasOptions
-  extends StaticCanvasOptions,
+  extends
+    StaticCanvasOptions,
     CanvasTransformOptions,
     CanvasSelectionOptions,
     CanvasCursorOptions,

package/src/canvas/SelectableCanvas.ts

@@ -565,6 +565,8 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
    * Given the control clicked, determine the origin of the transform.
    * This is bad because controls can totally have custom names
    * should disappear before release 4.0
+   * Fabric 7.1, jan 2026 we are still using this.
+   * Needs to go.
    * @private
    * @deprecated
    */
@@ -572,15 +574,20 @@ export class SelectableCanvas<EventSpec extends CanvasEvents = CanvasEvents>
     target: FabricObject,
     controlName: string,
   ): { x: TOriginX; y: TOriginY } {
-    const origin = {
-      x: target.originX,
-      y: target.originY,
-    };
+    const origin = controlName
+      ? target.controls[controlName].getTransformAnchorPoint()
+      : {
+          x: target.originX,
+          y: target.originY,
+        };
 
     if (!controlName) {
       return origin;
     }
 
+    // this part down here is deprecated.
+    // It is left to do not change the standard behavior in the middle of a major version
+    // but when possible `getTransformAnchorPoint` will be the only source of truth
     // is a left control ?
     if (['ml', 'tl', 'bl'].includes(controlName)) {
       origin.x = RIGHT;

package/src/canvas/StaticCanvas.spec.ts

@@ -2241,6 +2241,26 @@ describe('StaticCanvas', () => {
   // });
 });
 
+describe('malicious tests', () => {
+  it('from JSON to svg', async () => {
+    const canvas = new StaticCanvas();
+    const maliciousJSON = {
+      objects: [
+        {
+          type: 'rect',
+          id: '"><set onbegin="alert(1)"/>',
+          width: 100,
+          height: 100,
+          fill: 'red',
+        },
+      ],
+    };
+    await canvas.loadFromJSON(maliciousJSON);
+    const svg = canvas.toSVG();
+    expect(svg).not.toContain('onbegin="alert(1)"');
+  });
+});
+
 function makeRect(options = {}) {
   const defaultOptions = { width: 10, height: 10 };
   return new Rect({ ...defaultOptions, ...options });

package/src/canvas/StaticCanvas.ts

@@ -44,6 +44,7 @@ import type { StaticCanvasOptions } from './StaticCanvasOptions';
 import { staticCanvasDefaults } from './StaticCanvasOptions';
 import { log, FabricError } from '../util/internals/console';
 import { getDevicePixelRatio } from '../env';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * Having both options in TCanvasSizeOptions set to true transform the call in a calcOffset
@@ -86,9 +87,9 @@ export type PatternQuality = 'fast' | 'good' | 'best' | 'nearest' | 'bilinear';
  */
 // TODO: fix `EventSpec` inheritance https://github.com/microsoft/TypeScript/issues/26154#issuecomment-1366616260
 export class StaticCanvas<
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    EventSpec extends StaticCanvasEvents = StaticCanvasEvents,
-  >
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  EventSpec extends StaticCanvasEvents = StaticCanvasEvents,
+>
   extends createCollectionMixin(CommonMethods<CanvasEvents>)
   implements StaticCanvasOptions
 {
@@ -950,7 +951,9 @@ export class StaticCanvas<
     this._setSVGPreamble(markup, options);
     this._setSVGHeader(markup, options);
     if (this.clipPath) {
-      markup.push(`<g clip-path="url(#${this.clipPath.clipPathId})" >\n`);
+      markup.push(
+        `<g clip-path="url(#${escapeXml(this.clipPath.clipPathId ?? '')})" >\n`,
+      );
     }
     this._setSVGBgOverlayColor(markup, 'background');
     this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);