fix(Image): regression typo in the style attribute for svg export (#9717

)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Image): typo in style property for svg export [#9717](https://github.com/fabricjs/fabric.js/pull/9717)
 - ci(): Update the changelog and stats action to work from forks
 - fix(Shadow): Cloning a shape with shadow throws an error[#9711](https://github.com/fabricjs/fabric.js/issues/9711)
 - chore(TS): use consistent and improved types for getDefaults and ownDefaults [#9698](https://github.com/fabricjs/fabric.js/pull/9698)

src/shapes/Image.spec.ts

@@ -0,0 +1,27 @@
+import { FabricImage } from './Image';
+import { Shadow } from '../Shadow';
+
+describe('FabricImage', () => {
+  describe('Svg export', () => {
+    test('It exports an svg with styles for an image with stroke', () => {
+      const imgElement = new Image(200, 200);
+      const img = new FabricImage(imgElement, {
+        left: 3,
+        top: 3,
+        cropX: 10,
+        cropY: 10,
+        width: 150,
+        height: 150,
+        stroke: 'red',
+        strokeWidth: 11,
+        shadow: new Shadow({
+          color: 'rgba(0, 0, 0, 0.5)',
+          blur: 24,
+          offsetX: 0,
+          offsetY: 14,
+        }),
+      });
+      expect(img.toSVG()).toMatchSnapshot();
+    });
+  });
+});

src/shapes/Image.ts

@@ -412,7 +412,7 @@ export class FabricImage<
       strokeSvg = [
         `\t<rect x="${x}" y="${y}" width="${this.width}" height="${
           this.height
-        }" styles="${this.getSvgStyles()}" />\n`,
+        }" style="${this.getSvgStyles()}" />\n`,
       ];
       this.fill = origFill;
     }

src/shapes/__snapshots__/Image.spec.ts.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FabricImage Svg export It exports an svg with styles for an image with stroke 1`] = `
+"<g transform="matrix(1 0 0 1 83.5 83.5)"  >
+<filter id="SVGID_0" y="-45.33%" height="190.66%" x="-36%" width="172%" >
+	<feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
+	<feOffset dx="0" dy="14" result="oBlur" ></feOffset>
+	<feFlood flood-color="rgb(0,0,0)" flood-opacity="0.5"/>
+	<feComposite in2="oBlur" operator="in" />
+	<feMerge>
+		<feMergeNode></feMergeNode>
+		<feMergeNode in="SourceGraphic"></feMergeNode>
+	</feMerge>
+</filter>
+<clipPath id="imageCrop_2">
+	<rect x="-75" y="-75" width="150" height="150" />
+</clipPath>
+	<image style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_0);"  xlink:href="" x="-85" y="-85" width="200" height="200" clip-path="url(#imageCrop_2)" ></image>
+	<rect x="-75" y="-75" width="150" height="150" style="stroke: rgb(255,0,0); stroke-width: 11; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;filter: url(#SVGID_0);" />
+</g>
+"
+`;