From 5eefde89acdf10c15d91ceb487c0af1fbf4f70f8 Mon Sep 17 00:00:00 2001
From: kmkzt <info.pscreator@gmail.com>
Date: Tue, 28 May 2019 14:00:31 +0900
Subject: [PATCH] feat: remove unuse svgDom

---
 src/SvgDrawing.ts          |  4 +++-
 src/utils/svgFormatting.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/svgFormatting.ts

diff --git a/src/SvgDrawing.ts b/src/SvgDrawing.ts
index ef14cbff9..e711dac4f 100644
--- a/src/SvgDrawing.ts
+++ b/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>`
   }
   /**
diff --git a/src/utils/svgFormatting.ts b/src/utils/svgFormatting.ts
new file mode 100644
index 000000000..b0458615e
--- /dev/null
+++ b/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
+}