feat: remove unuse svgDom

src/SvgDrawing.ts

@@ -1,4 +1,5 @@
 import Two, { ConstructorParams } from 'two.js'
+import { svgFormatting } from './utils/svgFormatting'
 export interface DrawingOption extends ConstructorParams {
   el: SvgDrawing['el']
   penColor?: SvgDrawing['penColor']
@@ -53,11 +54,12 @@ export class SvgDrawing extends Two {
    */
   public toSvgXml(): string | null {
     const domElement: HTMLElement = (this.renderer as any).domElement
+    const svgElement: SVGSVGElement = svgFormatting(domElement.outerHTML)
     if (!domElement) return null
     return `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${
       this.width
     }" height="${this.height}" viewBox="0 0 ${this.width} ${this.height}">${
-      domElement.innerHTML
+      svgElement.innerHTML
     }</svg>`
   }
   /**

src/utils/svgFormatting.ts

@@ -0,0 +1,26 @@
+/**
+ * remove <g>
+ * remove transform attribure
+ * @param svgString
+ * @returns {SVGSVGElement}
+ */
+export const svgFormatting = (svgString: string): SVGSVGElement => {
+  const parser: DOMParser = new DOMParser()
+  const doc: Document = parser.parseFromString(svgString, 'image/svg+xml')
+  const svgEle: SVGSVGElement = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg'
+  )
+  const originSvgEle: SVGSVGElement | null = doc.querySelector('svg')
+  if (!originSvgEle) return svgEle
+  ;['width', 'height', 'viewBox'].map((attr: string) => {
+    const attrValue: string | null = originSvgEle.getAttribute(attr)
+    if (attrValue) svgEle.setAttribute(attr, attrValue)
+  })
+  const pathEle: NodeListOf<SVGPathElement> = doc.querySelectorAll('path')
+  pathEle.forEach((path: SVGPathElement) => {
+    path.removeAttribute('transform')
+    svgEle.appendChild(path)
+  })
+  return svgEle
+}