🐛 fix: fix svg parsing

Author: arvinxx

src/parser/svg.ts

@@ -9,10 +9,14 @@ import { nodeToRawSVG, StrToRenderSVG, urlToRawSVG } from '../utils/svg';
 export const parseToSvg = async (node: SVGElement) => {
   const { height, width, left, top } = node.getBoundingClientRect();
 
-  const svgString = await StrToRenderSVG(nodeToRawSVG(node), {
-    width,
-    height,
-  });
+  const svgString = await StrToRenderSVG(
+    nodeToRawSVG(node),
+    {
+      width,
+      height,
+    },
+    node,
+  );
 
   const svg = new Svg({
     x: left,

src/parser/svgson.ts

@@ -131,15 +131,18 @@ export class Svgson {
       height?: number;
     },
   ) {
+    if (!svgString) return;
     // --------- 处理 Svg String 变成 Svg Shape ---------- //
 
     let result = svgson.parseSync(svgString, { camelcase: true });
+
     // 排除一下 svg 的循环嵌套的问题
     while (result.children.length === 1 && result.children[0].name === 'svg') {
       [result] = result.children;
     }
 
     const { children, attributes } = result;
+
     const { viewBox } = attributes;
 
     // 解析获得 viewBox 值
@@ -158,6 +161,8 @@ export class Svgson {
       x: 0,
       y: 0,
     });
+    if (!children) return;
+
     const background = new Rectangle(this.viewBox.toJSON());
     background.name = '容器';
     background.hasClippingMask = true;
@@ -178,12 +183,12 @@ export class Svgson {
   /**
    * 缩放比例
    */
-  aspectRatio: number;
+  aspectRatio: number = 1;
 
   /**
    * svg 的 ViewBox
    */
-  viewBox: Frame;
+  viewBox = new Frame();
 
   /**
    * Svg 包含的图层对象
@@ -199,6 +204,10 @@ export class Svgson {
 
   shapes: { path: string; style?: string }[] = [];
 
+  static init(): Svgson {
+    return new Svgson('', {});
+  }
+
   /**
    * 将图层
    */

src/utils/svg.ts

@@ -247,10 +247,12 @@ const getUseReplacement = (node: SVGUseElement) => {
  * @param svgString
  * @param width
  * @param height
+ * @param node 需要挂载的节点位置
  */
 export const StrToRenderSVG = async (
   svgString: string,
   { width, height }: { width: number; height: number },
+  node?: Element,
 ) => {
   const divNode = document.createElement('div');
   divNode.innerHTML = svgString;
@@ -259,7 +261,11 @@ export const StrToRenderSVG = async (
   svgNode.style.width = `${width}px`;
   svgNode.style.height = `${height}px`;
 
-  document.body.append(divNode);
+  if (node) {
+    node.append(divNode);
+  } else {
+    document.body.append(divNode);
+  }
 
   const queue = Array.from(svgNode.children);
 

tests/__tests__/parser/shape.spec.ts

@@ -1,4 +1,5 @@
 import { Bitmap, Group, parseToShape, Rectangle } from 'html2sketch';
+import { setupTestNode } from '@test-utils';
 
 describe('parseToShape', () => {
   beforeEach(() => {
@@ -18,9 +19,8 @@ describe('parseToShape', () => {
 
 </style>
     `;
-    const node = document.createElement('div');
 
-    node.innerHTML = `
+    const innerHTML = `
 <div
   id="radial-gradient"
   class="radial-gradient"
@@ -74,7 +74,7 @@ describe('parseToShape', () => {
 />
 `;
 
-    document.body.append(node);
+    setupTestNode(innerHTML);
   });
   it('shape 正常解析', async () => {
     const node = document.getElementById('shape') as HTMLDivElement;

tests/__tests__/parser/svgson.spec.ts

@@ -1,4 +1,4 @@
-import { SketchFormat } from 'html2sketch';
+import { SketchFormat, Svgson } from 'html2sketch';
 import {
   calcFrameScale,
   normalizeWindingRule,
@@ -127,108 +127,81 @@ describe('normalizeWindingRule', () => {
 });
 
 describe('Svgson 解析器', () => {
-  // describe('parseGNodeToGroup', () => {
-  //   it('不是 g 则返回空', () => {
-  //     const gNode = {
-  //       name: 'a',
-  //       type: 'element',
-  //       value: '',
-  //       attributes: {},
-  //       children: [],
-  //     };
-  //
-  //     expect(Svgson.parseGNodeToGroup(gNode)).toBeUndefined();
-  //   });
-  //   it('没有 children 正常解析', () => {
-  //     const gNode = {
-  //       name: 'g',
-  //       type: 'element',
-  //       value: '',
-  //       attributes: {
-  //         id: 'Page-1',
-  //         stroke: 'none',
-  //         strokeWidth: '1',
-  //         fill: 'none',
-  //         fillRule: 'evenodd',
-  //         style: '',
-  //       },
-  //       children: [],
-  //     };
-  //
-  //     expect(Svg.parseGNodeToGroup(gNode)).toStrictEqual({
-  //       type: 'group',
-  //       layers: [],
-  //       path: '',
-  //       style: { fills: [], strokes: [], style: '' },
-  //       windingRule: SketchFormat.WindingRule.EvenOdd,
-  //     });
-  //   });
-  //   it('有 children 解析正常', () => {
-  //     const gNode = {
-  //       name: 'g',
-  //       type: 'element',
-  //       value: '',
-  //       attributes: {
-  //         id: 'Page-1',
-  //         stroke: 'none',
-  //         strokeWidth: '1',
-  //         fill: 'none',
-  //         fillRule: 'evenodd',
-  //         style: '',
-  //       },
-  //       children: [
-  //         {
-  //           name: 'ellipse',
-  //           type: 'element',
-  //           value: '',
-  //           attributes: {
-  //             id: 'Combined-Shape',
-  //             fill: 'url(#linearGradient-4)',
-  //             cx: '100.519339',
-  //             cy: '100.436681',
-  //             rx: '23.6001926',
-  //             ry: '23.580786',
-  //             style:
-  //               'cx: 100.519px; cy: 100.437px; rx: 23.6002px; ry: 23.5808px; fill: url("#linearGradient-4"); color: rgba(0, 0, 0, 0.85); fill-rule: evenodd; font-size: 14px; font-variant: tabular-nums; text-decoration: none solid rgba(0, 0, 0, 0.85);',
-  //           },
-  //           children: [],
-  //         },
-  //       ],
-  //     };
-  //
-  //     expect(Svg.parseGNodeToGroup(gNode)).toStrictEqual({
-  //       type: 'group',
-  //       layers: [],
-  //       path: '',
-  //       style: { fills: [], strokes: [], style: '' },
-  //       windingRule: SketchFormat.WindingRule.EvenOdd,
-  //     });
-  //   });
-  // });
-  // describe('parseNodeToEllipse', () => {
-  //   it('没有填充 没有描边', () => {
-  //     const node = {
-  //       name: 'ellipse',
-  //       type: 'element',
-  //       value: '',
-  //       attributes: {
-  //         id: 'Combined-Shape',
-  //         fill: 'url(#linearGradient-4)',
-  //         cx: '100.519339',
-  //         cy: '100.436681',
-  //         rx: '23.6001926',
-  //         ry: '23.580786',
-  //         style:
-  //           'cx: 100.519px; cy: 100.437px; rx: 23.6002px; ry: 23.5808px; fill: url("#linearGradient-4"); color: rgba(0, 0, 0, 0.85); fill-rule: evenodd; font-size: 14px; font-variant: tabular-nums; text-decoration: none solid rgba(0, 0, 0, 0.85);',
-  //       },
-  //       children: [],
-  //     };
-  //     expect(parseNodeToEllipse(node)).toStrictEqual({
-  //       type: 'ellipse',
-  //       fills: [],
-  //       strokes: [],
-  //       style: '',
-  //     });
-  //   });
-  // });
+  const svgson = Svgson.init();
+  describe('parseGNodeToGroup', () => {
+    it('没有 children 正常解析', () => {
+      const gNode = {
+        name: 'g',
+        type: 'element',
+        value: '',
+        attributes: {
+          id: 'Page-1',
+          stroke: 'none',
+          strokeWidth: '1',
+          fill: 'none',
+          fillRule: 'evenodd',
+          style: '',
+        },
+        children: [],
+      };
+
+      const group = svgson.parseNodeToGroup(gNode);
+      expect(group.layers).toHaveLength(0);
+    });
+    it('有 children 解析正常', () => {
+      const gNode = {
+        name: 'g',
+        type: 'element',
+        value: '',
+        attributes: {
+          id: 'Page-1',
+          stroke: 'none',
+          strokeWidth: '1',
+          fill: 'none',
+          fillRule: 'evenodd',
+          style: '',
+        },
+        children: [
+          {
+            name: 'ellipse',
+            type: 'element',
+            value: '',
+            attributes: {
+              id: 'Combined-Shape',
+              fill: '#f1232f',
+              cx: '100.519339',
+              cy: '100.436681',
+              rx: '23.6001926',
+              ry: '23.580786',
+            },
+            children: [],
+          },
+        ],
+      };
+      const group = svgson.parseNodeToGroup(gNode);
+      expect(group.layers).toHaveLength(1);
+    });
+  });
+  describe('parseNodeToEllipse', () => {
+    it('没有填充 没有描边', () => {
+      const node = {
+        name: 'ellipse',
+        type: 'element',
+        value: '',
+        attributes: {
+          id: 'Combined-Shape',
+          fill: '#f1232f',
+          cx: '100',
+          cy: '50',
+          rx: '25',
+          ry: '20',
+        },
+        children: [],
+      };
+      const ellipse = svgson.parseNodeToEllipse(node);
+
+      expect(ellipse?.cx).toBe(100);
+      expect(ellipse?.cy).toBe(50);
+    });
+  });
 });