fabric 7.3.1 → 7.4.0

package/src/shapes/Object/FabricObject.spec.ts

@@ -1,6 +1,6 @@
 import { FabricObject } from './FabricObject';
 
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 describe('FabricObject', () => {
   it('setCoords should calculate control coords only if canvas ref is set', () => {
@@ -10,7 +10,8 @@ describe('FabricObject', () => {
     object.setCoords();
     expect(object.aCoords).toBeDefined();
     expect(object.oCoords).toBeUndefined();
-    object.canvas = vi.fn();
+    // @ts-expect-error -- mock canvas
+    object.canvas = { getZoom: () => 1 };
     object.setCoords();
     expect(object.aCoords).toBeDefined();
     expect(object.oCoords).toBeDefined();

package/src/shapes/Object/FabricObjectSVGExportMixin.ts

@@ -1,4 +1,8 @@
 import type { TSVGReviver } from '../../typedefs';
+import {
+  getSafeSvgStyleNumber,
+  getSafeSvgStyleToken,
+} from '../../util/internals/svgExportCheck';
 import { uid } from '../../util/internals/uid';
 import { colorPropToSVG } from '../../util/misc/svgParsing';
 import { FILL, NONE, STROKE } from '../../constants';
@@ -24,16 +28,38 @@ export class FabricObjectSVGExportMixin {
     this: FabricObjectSVGExportMixin & FabricObject,
     skipShadow?: boolean,
   ) {
-    const fillRule = this.fillRule ? this.fillRule : 'nonzero',
-      strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
-      strokeDashArray = this.strokeDashArray
-        ? this.strokeDashArray.join(' ')
-        : NONE,
-      strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0',
-      strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
-      strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
-      strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
-      opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
+    const fillRule =
+        this.fillRule == null ? 'nonzero' : getSafeSvgStyleToken(this.fillRule),
+      strokeWidth =
+        this.strokeWidth == null
+          ? '0'
+          : getSafeSvgStyleNumber(this.strokeWidth),
+      strokeDashArray =
+        this.strokeDashArray == null
+          ? NONE
+          : this.strokeDashArray.every((value) =>
+                Number.isFinite(Number(value)),
+              )
+            ? this.strokeDashArray.join(' ')
+            : '',
+      strokeDashOffset =
+        this.strokeDashOffset == null
+          ? '0'
+          : getSafeSvgStyleNumber(this.strokeDashOffset),
+      strokeLineCap =
+        this.strokeLineCap == null
+          ? 'butt'
+          : getSafeSvgStyleToken(this.strokeLineCap),
+      strokeLineJoin =
+        this.strokeLineJoin == null
+          ? 'miter'
+          : getSafeSvgStyleToken(this.strokeLineJoin),
+      strokeMiterLimit =
+        this.strokeMiterLimit == null
+          ? '4'
+          : getSafeSvgStyleNumber(this.strokeMiterLimit),
+      opacity =
+        this.opacity == null ? '1' : getSafeSvgStyleNumber(this.opacity),
       visibility = this.visible ? '' : ' visibility: hidden;',
       filter = skipShadow ? '' : this.getSvgFilter(),
       fill = colorPropToSVG(FILL, this.fill),
@@ -41,31 +67,15 @@ export class FabricObjectSVGExportMixin {
 
     return [
       stroke,
-      'stroke-width: ',
-      strokeWidth,
-      '; ',
-      'stroke-dasharray: ',
-      strokeDashArray,
-      '; ',
-      'stroke-linecap: ',
-      strokeLineCap,
-      '; ',
-      'stroke-dashoffset: ',
-      strokeDashOffset,
-      '; ',
-      'stroke-linejoin: ',
-      strokeLineJoin,
-      '; ',
-      'stroke-miterlimit: ',
-      strokeMiterLimit,
-      '; ',
+      strokeWidth ? `stroke-width: ${strokeWidth}; ` : '',
+      strokeDashArray ? `stroke-dasharray: ${strokeDashArray}; ` : '',
+      strokeLineCap ? `stroke-linecap: ${strokeLineCap}; ` : '',
+      strokeDashOffset ? `stroke-dashoffset: ${strokeDashOffset}; ` : '',
+      strokeLineJoin ? `stroke-linejoin: ${strokeLineJoin}; ` : '',
+      strokeMiterLimit ? `stroke-miterlimit: ${strokeMiterLimit}; ` : '',
       fill,
-      'fill-rule: ',
-      fillRule,
-      '; ',
-      'opacity: ',
-      opacity,
-      ';',
+      fillRule ? `fill-rule: ${fillRule}; ` : '',
+      opacity ? `opacity: ${opacity};` : '',
       filter,
       visibility,
     ]
@@ -93,10 +103,10 @@ export class FabricObjectSVGExportMixin {
     return [
       this.id ? `id="${escapeXml(String(this.id))}" ` : '',
       this.clipPath
-        ? `clip-path="url(#${
+        ? `clip-path="url(#${escapeXml(
             (this.clipPath as FabricObjectSVGExportMixin & FabricObject)
-              .clipPathId
-          })" `
+              .clipPathId!,
+          )})" `
         : '',
     ].join('');
   }

package/src/shapes/Object/InteractiveObject.ts

@@ -5,6 +5,9 @@ import { degreesToRadians } from '../../util/misc/radiansDegreesConversion';
 import type { TQrDecomposeOut } from '../../util/misc/matrix';
 import {
   calcDimensionsMatrix,
+  calcPlaneRotation,
+  calcPlaneZoom,
+  calcPlaneScaleY,
   createRotateMatrix,
   createTranslateMatrix,
   multiplyTransformMatrices,
@@ -254,6 +257,8 @@ export class InteractiveFabricObject<
    */
   calcOCoords(): Record<string, TOCoord> {
     const vpt = this.getViewportTransform(),
+      vptScaleX = calcPlaneZoom(vpt),
+      vptScaleY = calcPlaneScaleY(vpt),
       center = this.getCenterPoint(),
       tMatrix = createTranslateMatrix(center.x, center.y),
       rMatrix = createRotateMatrix({
@@ -262,10 +267,10 @@ export class InteractiveFabricObject<
       positionMatrix = multiplyTransformMatrices(tMatrix, rMatrix),
       startMatrix = multiplyTransformMatrices(vpt, positionMatrix),
       finalMatrix = multiplyTransformMatrices(startMatrix, [
-        1 / vpt[0],
+        1 / vptScaleX,
         0,
         0,
-        1 / vpt[3],
+        1 / vptScaleY,
         0,
         0,
       ]),
@@ -461,7 +466,12 @@ export class InteractiveFabricObject<
     if (this.flipX) {
       options.angle -= 180;
     }
-    ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle));
+    const vptAngle = calcPlaneRotation(vpt);
+    ctx.rotate(
+      this.group
+        ? degreesToRadians(options.angle)
+        : degreesToRadians(this.angle) + vptAngle,
+    );
     shouldDrawBorders && this.drawBorders(ctx, options, styleOverride);
     shouldDrawControls && this.drawControls(ctx, styleOverride);
     ctx.restore();

package/src/shapes/Object/Object-interactivity.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { FabricObject } from './FabricObject';
 import { Point } from '../../Point';
 
@@ -211,7 +211,7 @@ describe('ObjectInteractivity', () => {
       height: 10,
       strokeWidth: 0,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
     cObj.setCoords();
 
@@ -337,6 +337,92 @@ describe('ObjectInteractivity', () => {
     );
   });
 
+  it('corner coords with a rotated viewport transform', () => {
+    const cObj = new FabricObject({
+      left: 0,
+      top: 0,
+      width: 100,
+      height: 100,
+      strokeWidth: 0,
+    });
+    // @ts-expect-error -- mock canvas
+    cObj.canvas = {
+      viewportTransform: [0, 1, -1, 0, 0, 0],
+      getZoom: () => 1,
+    };
+    cObj.setCoords();
+
+    expect(cObj.oCoords.tl.x, 'tl.x is rotated 90 degrees').toBeCloseTo(50);
+    expect(cObj.oCoords.tl.y, 'tl.y is rotated 90 degrees').toBeCloseTo(-50);
+    expect(cObj.oCoords.tr.x, 'tr.x is rotated 90 degrees').toBeCloseTo(50);
+    expect(cObj.oCoords.tr.y, 'tr.y is rotated 90 degrees').toBeCloseTo(50);
+    expect(cObj.oCoords.br.x, 'br.x is rotated 90 degrees').toBeCloseTo(-50);
+    expect(cObj.oCoords.br.y, 'br.y is rotated 90 degrees').toBeCloseTo(50);
+    expect(cObj.oCoords.bl.x, 'bl.x is rotated 90 degrees').toBeCloseTo(-50);
+    expect(cObj.oCoords.bl.y, 'bl.y is rotated 90 degrees').toBeCloseTo(-50);
+  });
+
+  it('corner coords with a non-uniform viewport transform', () => {
+    // originX/Y default to 'center', so left=0,top=0 puts the canvas-space center
+    // at (0,0). With vpt=[2,0,0,3,0,0] (no translation) the screen center is also
+    // at (0,0); controls should span ±(width*scaleX/2) × ±(height*scaleY/2).
+    const cObj = new FabricObject({
+      left: 0,
+      top: 0,
+      width: 100,
+      height: 100,
+      strokeWidth: 0,
+    });
+    // @ts-expect-error -- mock canvas
+    cObj.canvas = {
+      viewportTransform: [2, 0, 0, 3, 0, 0],
+      getZoom: () => 2,
+    };
+    cObj.setCoords();
+
+    expect(
+      cObj.oCoords.tl.x,
+      'tl.x: half-width scaled by scaleX=2',
+    ).toBeCloseTo(-100);
+    expect(
+      cObj.oCoords.tl.y,
+      'tl.y: half-height scaled by scaleY=3',
+    ).toBeCloseTo(-150);
+    expect(
+      cObj.oCoords.br.x,
+      'br.x: half-width scaled by scaleX=2',
+    ).toBeCloseTo(100);
+    expect(
+      cObj.oCoords.br.y,
+      'br.y: half-height scaled by scaleY=3',
+    ).toBeCloseTo(150);
+  });
+
+  it('_renderControls rotates by the combined viewport and object angle', () => {
+    const cObj = new FabricObject({ width: 100, height: 100, strokeWidth: 0 });
+    const cos = Math.SQRT1_2,
+      sin = Math.SQRT1_2;
+    // @ts-expect-error -- mock canvas
+    cObj.canvas = {
+      viewportTransform: [cos, sin, -sin, cos, 0, 0],
+      getZoom: () => 1,
+    };
+    const rotate = vi.fn();
+    const ctx = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      translate: vi.fn(),
+      rotate,
+      lineWidth: 0,
+      globalAlpha: 0,
+    };
+    // @ts-expect-error -- mock context
+    cObj._renderControls(ctx, { hasBorders: false, hasControls: false });
+
+    expect(rotate).toHaveBeenCalledTimes(1);
+    expect(rotate.mock.calls[0][0]).toBeCloseTo(Math.PI / 4);
+  });
+
   // set size for bottom left corner and have different results for bl than normal setCornerCoords test
   it('corner coords: custom control size', () => {
     //set custom corner size
@@ -352,7 +438,7 @@ describe('ObjectInteractivity', () => {
       strokeWidth: 0,
       controls: sharedControls,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
     cObj.setCoords();
 
@@ -490,7 +576,7 @@ describe('ObjectInteractivity', () => {
       height: 30,
       strokeWidth: 0,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
 
     expect(typeof cObj.findControl, 'findControl should exist').toBe(
@@ -503,6 +589,7 @@ describe('ObjectInteractivity', () => {
       getActiveObject() {
         return cObj;
       },
+      getZoom: () => 1,
     };
 
     expect(cObj.findControl(cObj.oCoords.br), 'br control').toEqual({
@@ -561,7 +648,7 @@ describe('ObjectInteractivity', () => {
       height: 30,
       strokeWidth: 0,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
 
     cObj.setCoords();
@@ -570,6 +657,7 @@ describe('ObjectInteractivity', () => {
       getActiveObject() {
         return cObj;
       },
+      getZoom: () => 1,
     };
 
     const pointNearBr = new Point({
@@ -609,7 +697,7 @@ describe('ObjectInteractivity', () => {
       height: 30,
       strokeWidth: 0,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
 
     expect(typeof cObj.findControl, 'findControl should exist').toBe(
@@ -622,6 +710,7 @@ describe('ObjectInteractivity', () => {
       getActiveObject() {
         return undefined;
       },
+      getZoom: () => 1,
     };
 
     expect(
@@ -638,7 +727,7 @@ describe('ObjectInteractivity', () => {
       height: 30,
       strokeWidth: 0,
       // @ts-expect-error -- mock canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
 
     expect(typeof cObj.findControl, 'findControl should exist').toBe(
@@ -651,6 +740,7 @@ describe('ObjectInteractivity', () => {
       getActiveObject() {
         return cObj;
       },
+      getZoom: () => 1,
     };
 
     cObj.isControlVisible = () => false;
@@ -717,6 +807,35 @@ describe('ObjectInteractivity', () => {
     expect(dim.y.toFixed(0), 'height should change with padding').toBe('78');
   });
 
+  it('_calculateCurrentDimensions with a rotated viewport transform', () => {
+    const cObj = new FabricObject({ width: 200, height: 200, strokeWidth: 0 });
+    const cos = Math.SQRT1_2,
+      sin = Math.SQRT1_2;
+    // @ts-expect-error -- mock canvas
+    cObj.canvas = {
+      viewportTransform: [cos, sin, -sin, cos, 0, 0],
+      getZoom: () => 1,
+    };
+
+    const dim = cObj._calculateCurrentDimensions();
+
+    expect(dim.x, 'width is independent of viewport rotation').toBeCloseTo(200);
+    expect(dim.y, 'height is independent of viewport rotation').toBeCloseTo(
+      200,
+    );
+  });
+
+  it('_calculateCurrentDimensions with a non-uniform viewport transform', () => {
+    const cObj = new FabricObject({ width: 200, height: 100, strokeWidth: 0 });
+    // @ts-expect-error -- mock canvas
+    cObj.canvas = { viewportTransform: [2, 0, 0, 3, 0, 0], getZoom: () => 2 };
+
+    const dim = cObj._calculateCurrentDimensions();
+
+    expect(dim.x, 'width scales by vpt scaleX').toBeCloseTo(400);
+    expect(dim.y, 'height scales by vpt scaleY').toBeCloseTo(300);
+  });
+
   it('_getTransformedDimensions', () => {
     const cObj = new FabricObject({ width: 10, height: 15, strokeWidth: 0 });
 

package/src/shapes/Object/ObjectGeometry.spec.ts

@@ -365,7 +365,7 @@ describe('fabric.ObjectGeometry', () => {
       height: 100,
       strokeWidth: 0,
       // @ts-expect-error -- fake canvas
-      canvas: {},
+      canvas: { getZoom: () => 1 },
     });
     expect(cObj.setCoords).toBeTypeOf('function');
     cObj.setCoords();
@@ -435,6 +435,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 0, 0],
+      getZoom: () => 2,
     };
     cObj.setCoords();
 
@@ -720,6 +721,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 0, 0],
+      getZoom: () => 2,
     };
     cObj.scaleToWidth(100);
     expect(cObj.getScaledWidth(), 'is not influenced by zoom - width').toBe(
@@ -741,6 +743,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 0, 0],
+      getZoom: () => 2,
     };
     cObj.scaleToHeight(100);
     expect(cObj.getScaledHeight(), 'is not influenced by zoom - height').toBe(
@@ -790,6 +793,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 0, 0],
+      getZoom: () => 2,
     };
     cObj.setCoords();
     boundingRect = cObj.getBoundingRect();
@@ -955,6 +959,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 35, 35],
+      getZoom: () => 2,
     };
     const coords = cObj.getCoords();
     expect(coords[0]).toEqual(new Point(40, 30));
@@ -976,6 +981,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 35, 25],
+      getZoom: () => 2,
     };
     const coords = cObj.getCoords();
     expect(coords).toMatchSnapshot();
@@ -994,6 +1000,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 35, 25],
+      getZoom: () => 2,
     };
     const coords = cObj.getCoords();
     expect(coords).toMatchInlineSnapshot(`
@@ -1031,6 +1038,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 35, 25],
+      getZoom: () => 2,
     };
     const coords = cObj.getCoords();
     expect(coords).toMatchInlineSnapshot(`
@@ -1070,6 +1078,7 @@ describe('fabric.ObjectGeometry', () => {
     // @ts-expect-error -- partial canvas
     cObj.canvas = {
       viewportTransform: [2, 0, 0, 2, 35, 25],
+      getZoom: () => 2,
     };
     const coords = cObj.getCoords();
     expect(coords).toMatchInlineSnapshot(`

package/src/shapes/Object/ObjectGeometry.ts

@@ -18,6 +18,8 @@ import {
   multiplyTransformMatrices,
   transformPoint,
   calcPlaneRotation,
+  calcPlaneZoom,
+  calcPlaneScaleY,
 } from '../../util/misc/matrix';
 import { radiansToDegrees } from '../../util/misc/radiansDegreesConversion';
 import type { Canvas } from '../../canvas/Canvas';
@@ -553,9 +555,14 @@ export class ObjectGeometry<EventSpec extends ObjectEvents = ObjectEvents>
    * @returns {Point} dimensions
    */
   _calculateCurrentDimensions(options?: any): Point {
-    return this._getTransformedDimensions(options)
-      .transform(this.getViewportTransform(), true)
-      .scalarAdd(2 * this.padding);
+    const vpt = this.canvas?.viewportTransform;
+    const dim = this._getTransformedDimensions(options);
+    if (vpt) {
+      return dim
+        .multiply(new Point(calcPlaneZoom(vpt), calcPlaneScaleY(vpt)))
+        .scalarAdd(2 * this.padding);
+    }
+    return dim.scalarAdd(2 * this.padding);
   }
 
   // #region Origin

package/src/shapes/Object/objectSvgExport.spec.ts

@@ -110,3 +110,30 @@ describe.each([MALICIOUS, MALICIOUS2])(
     });
   },
 );
+
+describe('Object SVG style declaration sanitization', () => {
+  it('drops unsafe inline style values from object svg styles', () => {
+    const rect = new Rect({
+      width: 10,
+      height: 10,
+      fillRule: 'evenodd; filter:url(javascript:alert(1))' as never,
+      strokeLineCap: 'round; opacity:0' as never,
+      strokeLineJoin: 'bevel; fill:url(#x)' as never,
+      strokeDashArray: ['4', '2; fill:url(#x)'] as never,
+      strokeDashOffset: '1; opacity:0' as never,
+      strokeMiterLimit: '4; opacity:0' as never,
+      opacity: '1; visibility:hidden' as never,
+    });
+
+    const svgStyles = rect.getSvgStyles();
+    expect(svgStyles).not.toContain('fill-rule:');
+    expect(svgStyles).not.toContain('stroke-linecap:');
+    expect(svgStyles).not.toContain('stroke-linejoin:');
+    expect(svgStyles).not.toContain('stroke-dasharray:');
+    expect(svgStyles).not.toContain('stroke-dashoffset:');
+    expect(svgStyles).not.toContain('stroke-miterlimit:');
+    expect(svgStyles).not.toContain('opacity:');
+    expect(svgStyles).not.toContain('javascript:');
+    expect(svgStyles).not.toContain('filter:url');
+  });
+});

package/src/shapes/Object/types/FabricObjectProps.ts

@@ -8,7 +8,7 @@ export interface FabricObjectProps
   /**
    * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
    * too much and will be redrawn with correct details at the end of scaling.
-   * this setting is performance and application dependant.
+   * this setting is performance and application dependent.
    * default to true
    * since 1.7.0
    * @type Boolean

package/src/shapes/Text/Text.spec.ts

@@ -967,6 +967,31 @@ describe('FabricText', () => {
     expect(styleString, 'style is as expected').toBe(expected);
   });
 
+  it('getSvgSpanStyles drops unsafe style declarations', () => {
+    const iText = new IText('test foo bar-baz', {
+      textDecorationColor: 'blue; fill:url(#x)' as never,
+    });
+    // @ts-expect-error -- TODO: this is added by the mixing, can the types be improved here?
+    const styleString = iText.getSvgSpanStyles({
+      fill: 'red; stroke:url(javascript:alert(1))',
+      strokeWidth: '30; opacity:0' as never,
+      fontFamily: 'Verdana; font-size:999px',
+      fontSize: '25; opacity:0' as never,
+      fontStyle: 'italic; fill:url(#x)' as never,
+      fontWeight: 'bold; fill:url(#x)' as never,
+      underline: true,
+      textDecorationColor: 'green; fill:url(#x)' as never,
+    });
+    expect(styleString).toContain('fill: rgb(0,0,0); ');
+    expect(styleString).not.toContain('stroke-width: 30;');
+    expect(styleString).not.toContain('font-family:');
+    expect(styleString).not.toContain('font-size: 25px;');
+    expect(styleString).not.toContain('font-style:');
+    expect(styleString).not.toContain('font-weight:');
+    expect(styleString).not.toContain('text-decoration-color:');
+    expect(styleString).not.toContain('javascript:');
+  });
+
   it('getSvgTextDecoration with overline true produces correct output', () => {
     const iText = new IText('test foo bar-baz');
     const styleObject = {

package/src/shapes/Text/Text.ts

@@ -301,11 +301,11 @@ export class FabricText<
   declare path?: Path;
 
   /**
-   * The text decoration tickness for underline, overline and strikethrough
-   * The tickness is expressed in thousandths of fontSize ( em ).
+   * The text decoration thickness for underline, overline and strikethrough
+   * The thickness is expressed in thousandths of fontSize ( em ).
    * The original value was 1/15 that translates to 66.6667 thousandths.
    * The choice of unit of measure is to align with charSpacing.
-   * You can slim the tickness without issues, while large underline or overline may end up
+   * You can slim the thickness without issues, while large underline or overline may end up
    * outside the bounding box of the text. In order to fix that a bigger refactor of the code
    * is needed and is out of scope for now. If you need such large overline on the first line
    * of text or large underline on the last line of text, consider disabling caching as a
@@ -1147,7 +1147,7 @@ export class FabricText<
    * @private
    * @param {String} method fillText or strokeText.
    * @param {CanvasRenderingContext2D} ctx Context to render on
-   * @param {Array} line Content of the line, splitted in an array by grapheme
+   * @param {Array} line Content of the line, split in an array by grapheme
    * @param {Number} left
    * @param {Number} top
    * @param {Number} lineIndex
@@ -1595,7 +1595,7 @@ export class FabricText<
         TEXT_DECORATION_THICKNESS,
       );
       let currentDecoration = lastDecoration;
-      let currentFill = lastFill;
+      let currentFill: typeof lastFill;
       let currentDecorationColor = lastDecorationColor;
       let currentTickness = lastTickness;
       const top = topOffset + maxHeight * (1 - this._fontSizeFraction);

package/src/shapes/Text/TextSVGExportMixin.ts

@@ -16,6 +16,11 @@ import { STROKE, FILL } from '../../constants';
 import { createRotateMatrix } from '../../util/misc/matrix';
 import { radiansToDegrees } from '../../util/misc/radiansDegreesConversion';
 import { Point } from '../../Point';
+import {
+  getSafeSvgStyleNumber,
+  getSafeSvgStyleToken,
+  isSafeSvgStyleValue,
+} from '../../util/internals/svgExportCheck';
 import { matrixToSVG } from '../../util/misc/svgExport';
 
 const multipleSpacesRegex = /  +/g;
@@ -307,7 +312,9 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
    * @return {String}
    */
   getSvgStyles(this: TextSVGExportMixin & FabricText, skipShadow?: boolean) {
-    const objectLevelTextDecorationColor = this[TEXT_DECORATION_COLOR]
+    const objectLevelTextDecorationColor = isSafeSvgStyleValue(
+      this[TEXT_DECORATION_COLOR],
+    )
       ? ` text-decoration-color: ${escapeXml(this[TEXT_DECORATION_COLOR])};`
       : '';
     return `${super.getSvgStyles(skipShadow)} text-decoration-thickness: ${toFixed((this.textDecorationThickness * this.getObjectScaling().y) / 10, config.NUM_FRACTION_DIGITS)}%;${objectLevelTextDecorationColor} white-space: pre;`;
@@ -347,23 +354,30 @@ export class TextSVGExportMixin extends FabricObjectSVGExportMixin {
     const thickness =
       textDecorationThickness || this[TEXT_DECORATION_THICKNESS];
     const decorationColor = textDecorationColor || this[TEXT_DECORATION_COLOR];
+    const safeStrokeWidth = getSafeSvgStyleNumber(strokeWidth);
+    const safeFontFamily = getSafeSvgStyleToken(fontFamily);
+    const safeFontSize = getSafeSvgStyleNumber(fontSize);
+    const safeFontStyle = getSafeSvgStyleToken(fontStyle);
+    const safeFontWeight =
+      getSafeSvgStyleNumber(fontWeight) || getSafeSvgStyleToken(fontWeight);
+    const safeDecorationColor = getSafeSvgStyleToken(decorationColor);
     return [
       stroke ? colorPropToSVG(STROKE, stroke) : '',
-      strokeWidth ? `stroke-width: ${escapeXml(strokeWidth)}; ` : '',
-      fontFamily
+      safeStrokeWidth ? `stroke-width: ${escapeXml(safeStrokeWidth)}; ` : '',
+      safeFontFamily
         ? `font-family: ${
-            !fontFamily.includes("'") && !fontFamily.includes('"')
-              ? `'${escapeXml(fontFamily)}'`
-              : escapeXml(fontFamily)
+            !safeFontFamily.includes("'") && !safeFontFamily.includes('"')
+              ? `'${escapeXml(safeFontFamily)}'`
+              : escapeXml(safeFontFamily)
           }; `
         : '',
-      fontSize ? `font-size: ${escapeXml(fontSize)}px; ` : '',
-      fontStyle ? `font-style: ${escapeXml(fontStyle)}; ` : '',
-      fontWeight ? `font-weight: ${escapeXml(fontWeight)}; ` : '',
+      safeFontSize ? `font-size: ${escapeXml(safeFontSize)}px; ` : '',
+      safeFontStyle ? `font-style: ${escapeXml(safeFontStyle)}; ` : '',
+      safeFontWeight ? `font-weight: ${escapeXml(safeFontWeight)}; ` : '',
       textDecoration
         ? `text-decoration: ${textDecoration}; text-decoration-thickness: ${toFixed((thickness * this.getObjectScaling().y) / 10, config.NUM_FRACTION_DIGITS)}%;${
-            decorationColor
-              ? ` text-decoration-color: ${escapeXml(decorationColor)};`
+            safeDecorationColor
+              ? ` text-decoration-color: ${escapeXml(safeDecorationColor)};`
               : ''
           } `
         : '',