fix: 修复导出svg字体不生效

Author: AliceLanniste

packages/core/ServersPlugin.ts

@@ -11,6 +11,8 @@ import { fabric } from 'fabric';
 import Editor from './Editor';
 type IEditor = Editor;
 import { SelectEvent, SelectMode } from './eventType';
+import { off } from 'process';
+import { forIn } from 'lodash-es';
 
 function transformText(objects: any) {
   if (!objects) return;
@@ -227,8 +229,11 @@ class ServersPlugin {
 
   saveSvg() {
     this.editor.hooksEntity.hookSaveBefore.callAsync('', () => {
-      const option = this._getSaveSvgOption();
-      const dataUrl = this.canvas.toSVG(option);
+      const { fontOption, svgOption } = this._getSaveSvgOption();
+      fabric.fontPaths = {
+        ...fontOption,
+      };
+      const dataUrl = this.canvas.toSVG(svgOption);
       const fileStr = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(dataUrl)}`;
       this.editor.hooksEntity.hookSaveAfter.callAsync(fileStr, () => {
         downFile(fileStr, 'svg');
@@ -263,15 +268,33 @@ class ServersPlugin {
 
   _getSaveSvgOption() {
     const workspace = this.canvas.getObjects().find((item) => item.id === 'workspace');
+    let fontFamilyArry = this.canvas
+      .getObjects()
+      .filter((item) => item.type == 'textbox')
+      .map((item) => item.fontFamily);
+    fontFamilyArry = Array.from(new Set(fontFamilyArry));
+
+    const fontList = this.editor.getPlugin('FontPlugin').cacheList;
+
+    const fontEntry = {};
+    for (const font of fontFamilyArry) {
+      const item = fontList.find((item) => item.name === font);
+      fontEntry[font] = item.file;
+    }
+
+    console.log('_getSaveSvgOption', fontEntry);
     const { left, top, width, height } = workspace as fabric.Object;
     return {
-      width,
-      height,
-      viewBox: {
-        x: left,
-        y: top,
+      fontOption: fontEntry,
+      svgOption: {
         width,
         height,
+        viewBox: {
+          x: left,
+          y: top,
+          width,
+          height,
+        },
       },
     };
   }
@@ -280,6 +303,7 @@ class ServersPlugin {
     const workspace = this.canvas
       .getObjects()
       .find((item: fabric.Object) => item.id === 'workspace');
+    console.log('getObjects', this.canvas.getObjects());
     const { left, top, width, height } = workspace as fabric.Object;
     const option = {
       name: 'New Image',