From 684000f27f40dae1b6abe476aa9fcb68e9ea67c7 Mon Sep 17 00:00:00 2001
From: wengxiangmin <157215725@qq.com>
Date: Thu, 7 Nov 2024 15:03:22 +0800
Subject: [PATCH] fix: svg style parse

---
 src/svg-dom/parseCSSStylesheet.ts | 16 ++++---
 src/svg-dom/parseNode.ts          |  6 +--
 test/fixtures/006.svg             | 42 ++++---------------
 test/fixtures/007.svg             | 65 +++++++---------------------
 test/fixtures/ref.svg             | 70 +++++++++++++++++++++++++++++++
 5 files changed, 105 insertions(+), 94 deletions(-)
 create mode 100644 test/fixtures/ref.svg

diff --git a/src/svg-dom/parseCSSStylesheet.ts b/src/svg-dom/parseCSSStylesheet.ts
index aa2309c..ab7651f 100644
--- a/src/svg-dom/parseCSSStylesheet.ts
+++ b/src/svg-dom/parseCSSStylesheet.ts
@@ -1,22 +1,28 @@
 export function parseCSSStylesheet(node: SVGStyleElement, stylesheets: Record<string, any>): void {
   if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length)
     return
+
   for (let i = 0; i < node.sheet.cssRules.length; i++) {
     const stylesheet = node.sheet.cssRules[i] as CSSStyleRule
+
     if (stylesheet.type !== 1)
       continue
+
     const selectorList = stylesheet.selectorText
       .split(/,/g)
       .filter(Boolean)
       .map(i => i.trim())
+
+    const definitions: Record<string, any> = {}
+    for (let len = stylesheet.style.length, i = 0; i < len; i++) {
+      const name = stylesheet.style.item(i)
+      definitions[name] = stylesheet.style.getPropertyValue(name)
+    }
+
     for (let j = 0; j < selectorList.length; j++) {
-      // Remove empty rules
-      const definitions = Object.fromEntries(
-        Object.entries(stylesheet.style).filter(([, v]) => v !== ''),
-      )
       stylesheets[selectorList[j]] = Object.assign(
         stylesheets[selectorList[j]] || {},
-        definitions,
+        { ...definitions },
       )
     }
   }
diff --git a/src/svg-dom/parseNode.ts b/src/svg-dom/parseNode.ts
index a9d215f..0cb4218 100644
--- a/src/svg-dom/parseNode.ts
+++ b/src/svg-dom/parseNode.ts
@@ -15,6 +15,7 @@ export function parseNode(
   node: SVGElement,
   style: Record<string, any>,
   paths: Path2D[] = [],
+  stylesheets: Record<string, any> = {},
 ): Path2D[] {
   if (node.nodeType !== 1)
     return paths
@@ -22,7 +23,6 @@ export function parseNode(
   let isDefsNode = false
   let path: Path2D | null = null
   let _style = { ...style }
-  const stylesheets: Record<string, any> = {}
 
   switch (node.nodeName) {
     case 'svg':
@@ -72,7 +72,7 @@ export function parseNode(
       const usedNodeId = href.substring(1)
       const usedNode = (node.viewportElement as any)?.getElementById(usedNodeId)
       if (usedNode) {
-        parseNode(usedNode, _style, paths)
+        parseNode(usedNode, _style, paths, stylesheets)
       }
       else {
         console.warn(`'use node' references non-existent node id: ${usedNodeId}`)
@@ -104,7 +104,7 @@ export function parseNode(
     const node = childNodes[i]
     if (isDefsNode && node.nodeName !== 'style' && node.nodeName !== 'defs')
       continue
-    parseNode(node as SVGElement, style, paths)
+    parseNode(node as SVGElement, style, paths, stylesheets)
   }
 
   if (transform) {
diff --git a/test/fixtures/006.svg b/test/fixtures/006.svg
index fd3b04f..eaa41f6 100644
--- a/test/fixtures/006.svg
+++ b/test/fixtures/006.svg
@@ -1,38 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
-<path style="fill:#4DDFF7;" d="M14.3,36.7c3.1,0.7,6.3,1.6,9.6,1.5c1.3-0.2,2.6-0.7,3.8-1.4c1.6-0.9,3.7-1.8,5.7-1.2
-	c2.7,0.5,5,2.5,7.8,1.8c5.4-2,11.3-1.7,16.5,0.8c-1.8-0.6-3.6-1-5.4-1.3c-2.7-0.4-5.5-0.3-8.2,0.5c-1.8,0.6-3.7,1.5-5.7,0.9
-	s-3.4-1.4-5.3-1.8c-0.8-0.2-1.7-0.2-2.5,0c-1.7,0.4-3.3,1.6-5.2,2.1C21.7,39.6,17.8,37.8,14.3,36.7L14.3,36.7z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
+     viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4DDFF7;}
+</style>
+  <path class="st0" d="M14.3,45.5c3.1,0.9,6.3,2,9.6,1.9c1.3-0.3,2.6-0.9,3.8-1.8c1.6-1.1,3.7-2.3,5.7-1.5c2.7,0.6,5,3.2,7.8,2.3
+	c5.4-2.5,11.3-2.2,16.5,1c-1.8-0.8-3.7-0.2-5.4-0.6c-2.7-0.5-5.5-0.4-8.2,0.6c-1.8,0.8-3.7,1.9-5.7,1.1c-2-0.8-3.4-1.8-5.3-2.3
+	c-0.8-0.3-1.7-0.3-2.5,0c-1.7,0.5-3.3,2-5.2,2.7C21.7,50.1,17.8,46.9,14.3,45.5L14.3,45.5z"/>
 </svg>
diff --git a/test/fixtures/007.svg b/test/fixtures/007.svg
index 9bc2e81..8d893af 100644
--- a/test/fixtures/007.svg
+++ b/test/fixtures/007.svg
@@ -1,54 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
-<g style="display:none;">
-	<path style="display:inline;fill:#232323;" d="M32.2,27l6.5,17.6h-2.8l-1.6-4.6h-7.2l-1.6,4.6h-2.7L29.3,27H32.2L32.2,27z
-		 M33.6,37.8l-2.8-8h-0.1l-2.8,8L33.6,37.8L33.6,37.8z M49.6,32.9c0.7,0.8,1.1,2,1.1,3.6v8.1h-2.3v-1.8c-0.5,0.6-1.1,1.2-1.8,1.5
-		c-0.8,0.4-1.8,0.6-2.8,0.6c-1.3,0-2.2-0.4-3-1c-0.8-0.7-1.2-1.5-1.2-2.6c0-1.4,0.5-2.5,1.7-3.3c1-0.7,2.4-1.1,4.2-1.2l2.7-0.1v-0.5
-		c0-1.8-0.9-2.7-2.8-2.7c-0.8,0-1.4,0.1-1.9,0.4c-0.6,0.4-0.9,0.9-1.1,1.6L40,35.5c0.2-1.4,0.9-2.4,2-3.1c0.9-0.6,2.1-0.9,3.7-0.9
-		C47.4,31.6,48.7,32,49.6,32.9L49.6,32.9z M45.7,38.8c-2.3,0.1-3.4,0.9-3.4,2.5c0,0.5,0.2,0.9,0.6,1.2c0.4,0.3,0.9,0.5,1.5,0.5
-		c1.1,0,2-0.4,2.7-1c0.8-0.7,1.2-1.5,1.2-2.5v-0.7H45.7z M45.7,38.8"/>
-</g>
-<path style="fill:#B70000;" d="M15,37L15,37z"/>
-<path style="fill:#B70000;" d="M56.8,37.5L56.8,37.5z"/>
-<path style="fill:#F97DCB;" d="M48.8,27.7c-2.8-0.6-5.6-1-8.4-1.2c-5.8-0.7-11.6-0.4-17.3,0.8c-4.5,0.9-12,4.5-10,9.5
-	c0,0,0,0.1,0,0.1v0.1c0-0.1,0-0.2,0-0.2c0.2,0.5,0.5,1,0.8,1.4c2.5,3.5,7.3,5.5,12,6.8c-1-0.2-1.9-0.4-2.9-0.6
-	c-4-1.1-9.3-2.9-9.9-7.3v0.3c0.5,4.5,5.9,6.1,9.5,7.2c3,0.9,6.1,1.4,9.3,1.5c5.8,0.7,11.6,0.4,17.3-0.9c4-1.1,9-2.7,9.6-7.3v-0.3
-	c-0.7,4.6-6,6.3-10,7.4c-4.7,1.1-9.4,1.5-14.2,1.2c2.8-0.1,5.5-0.3,8.3-0.8c5.4-1.1,12-2.9,15.2-7c0.3-0.4,0.6-0.8,0.8-1.3
-	c0,0.1,0,0.3,0,0.4v-0.1c0-0.1,0-0.2,0-0.3C60.7,32.2,53.3,28.7,48.8,27.7z M22.9,27.6c3.4-0.8,6.9-1.1,10.4-1
-	c-3.9,0.3-7.8,1-11.6,2.2c-3.3,1.2-7.2,3.1-8.3,6.5C13.4,31.1,19.1,28.4,22.9,27.6z M57.4,38.1c-3.4,4.2-9.3,6-14.6,7.1
-	c-4.8,0.8-9.8,0.8-14.6,0.2c-5.1-1.2-10.8-3.2-14-7.4c-0.5-0.8-0.8-1.7-0.9-2.6c1.1-3.3,4.6-5,8.1-6c5.3-1.6,10.9-2.4,16.4-2.5
-	c4.3,0.4,8.5,1.3,12.5,2.6c3.4,1.1,6.9,2.9,7.9,6.3C58.3,36.6,57.9,37.4,57.4,38.1z M50.2,28.8c-2.1-0.7-4.2-1.3-6.4-1.7
-	c1.8,0.2,3.5,0.5,5.3,0.9c3.8,0.9,9.6,3.7,9.3,7.6C57.3,32.1,53.5,30.1,50.2,28.8z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
+     viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
+<style type="text/css">
+	.st1{display:inline;fill:#232323;}
+	.st2{fill:#F95A8F;}
+</style>
+  <path class="st2" d="M61.5,33.4c-0.2-1.8-1.1-3.5-2.5-4.6c-4.3-3.8-13.4-5.9-23.3-5.3C26,23,17.2,25,13,28.6
+	c-1.4,1.1-2.4,2.8-2.5,4.6c0,0.5,0,1,0.1,1.5c-0.2,0.6-0.3,1.2-0.3,1.9c0.2,1.8,1.1,3.5,2.5,4.6c3.8,3.4,11.5,5.4,20.1,5.4
+	c0.8,0,1.6,0,2.4-0.1c1.3,0.1,2.6,0.1,3.9,0.1c8.5,0,16-1.9,19.7-5.3c1.4-1.1,2.4-2.8,2.5-4.6c0-0.6,0-1.3-0.2-1.9
+	C61.5,34.4,61.5,33.9,61.5,33.4z M60.9,33.4c0,0.1,0,0.2,0,0.4c-2.3-4.4-9.9-8.3-19.6-9.7c7.5,0.3,14,2.2,17.3,5.2
+	C59.9,30.2,60.7,31.8,60.9,33.4L60.9,33.4z M36.5,45.9h-1h-0.2C22.7,45,12.5,40.2,11.2,34.7c1.7-5.3,11.7-9.9,24.1-10.7h0.4l1,0.1
+	C49,25,59,29.6,60.6,34.9C59.3,40.3,49.1,45.1,36.5,45.9z M11.1,33.3c0.2-1.6,1-3.1,2.3-4.2c3.3-2.9,9.4-4.7,16.6-5
+	c-9.4,1.5-16.7,5.2-18.9,9.5C11.1,33.5,11.1,33.4,11.1,33.3z M11,36.6c0-0.2,0-0.4,0-0.7c2,4.5,9.4,8.5,19.1,10
+	c-7.2-0.4-13.5-2.3-16.8-5.2C12,39.7,11.2,38.2,11,36.6L11,36.6z M61,36.8c-0.2,1.7-1,3.2-2.3,4.2c-3.4,3-10,4.8-17.7,5.1
+	c10-1.4,17.9-5.4,19.9-10C60.9,36.3,61,36.5,61,36.8L61,36.8z"/>
 </svg>
diff --git a/test/fixtures/ref.svg b/test/fixtures/ref.svg
new file mode 100644
index 0000000..fd97f20
--- /dev/null
+++ b/test/fixtures/ref.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
+<g>
+	<path d="M19.3,38.1c0.2,0.5,0.4,0.9,0.7,1.4c0.2,0.3,0.4,0.4,0.8,0.4c0.3,0,0.5-0.1,0.6-0.4c0.1-0.3,0.1-0.6,0.2-0.9
+		c0-0.2,0.1-0.4,0.3-0.5c0.2-0.1,0.4-0.2,0.6-0.1c0.2,0,0.4,0.1,0.5,0.3c0.1,0.2,0.2,0.4,0.1,0.6c-0.1,0.6-0.2,1.2-0.4,1.7
+		c-0.3,0.8-0.9,1.2-1.7,1.2c-0.9,0-1.6-0.4-2.1-1.2c-0.3-0.4-0.5-0.8-0.7-1.3c-0.4,0.3-1,0.6-1.7,1c-0.5,0.2-0.8,0.1-1.1-0.3
+		c-0.2-0.5-0.1-0.9,0.3-1.1c0.7-0.4,1.4-0.8,1.9-1.1c-0.2-0.9-0.4-2.1-0.5-3.7L15.9,34c-0.2,0-0.4,0-0.6-0.1
+		c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.2,0-0.4,0.2-0.6s0.3-0.3,0.5-0.3l1.2-0.1c-0.1-0.9-0.1-1.9-0.1-2.9c0-0.2,0.1-0.4,0.2-0.6
+		c0.2-0.1,0.3-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.2,0.3,0.3,0.6c0,0.1,0,1,0.1,2.7l3.2-0.4c0.2,0,0.4,0,0.5,0.1
+		c0.2,0.1,0.3,0.3,0.3,0.5s0,0.4-0.1,0.5c-0.1,0.2-0.3,0.3-0.5,0.3l-3.3,0.4c0.1,1.2,0.2,2.1,0.3,2.8c0.7-0.6,1.4-1.4,2-2.2
+		c0.3-0.4,0.7-0.4,1.1-0.2c0.4,0.3,0.4,0.7,0.2,1C21.3,36.3,20.4,37.3,19.3,38.1z M20.6,31.1c-0.3-0.2-0.7-0.5-1.1-0.8
+		c-0.3-0.3-0.3-0.6-0.1-0.9c0.3-0.3,0.6-0.4,1-0.2c0.4,0.2,0.7,0.5,1.1,0.7c0.4,0.3,0.4,0.6,0.2,1C21.3,31.3,21,31.3,20.6,31.1z
+		 M23.3,30.9c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.6-0.2s0.4,0.1,0.6,0.2c0.1,0.1,0.2,0.3,0.2,0.5v6.5c0,0.2-0.1,0.4-0.2,0.5
+		c-0.1,0.1-0.3,0.2-0.6,0.2s-0.4-0.1-0.6-0.2c-0.1-0.1-0.2-0.3-0.2-0.5V30.9z M24.3,41.6c-0.2,0-0.4-0.1-0.6-0.2
+		c-0.2-0.1-0.2-0.3-0.2-0.6c0-0.2,0.1-0.4,0.2-0.6c0.2-0.1,0.3-0.2,0.6-0.2h0.9c0.6,0,1-0.4,1-1.1v-9.4c0-0.2,0.1-0.4,0.2-0.6
+		c0.2-0.1,0.3-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.2,0.3,0.2,0.6V39c0,0.8-0.2,1.5-0.7,1.9s-1.1,0.7-1.8,0.7H24.3z"/>
+	<path d="M40.6,37.7h-3.8v0.7h4.4c0.1,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4c0,0.1-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2
+		h-4.4v0.7H42c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4s-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2H30c-0.2,0-0.3-0.1-0.4-0.2
+		c-0.1-0.1-0.2-0.2-0.2-0.4s0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.4-0.2h5.2v-0.7h-4.4c-0.1,0-0.3-0.1-0.4-0.2s-0.2-0.2-0.2-0.4
+		c0-0.1,0.1-0.3,0.2-0.4s0.2-0.2,0.4-0.2h4.4v-0.7h-3.7h0c-0.2,0-0.4-0.1-0.6-0.2s-0.2-0.3-0.2-0.6v-3.1c0-0.2,0.1-0.4,0.2-0.6
+		c0.1-0.1,0.3-0.2,0.6-0.2h3.8v-0.8H30c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4s0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.4-0.2
+		h5.2v-0.8c-1.4,0-2.9,0.1-4.3,0.1c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.2,0-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2
+		c3.3,0,6.8-0.1,10.2-0.3c0.2,0,0.3,0,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2
+		c-1.1,0-2.5,0.1-4.3,0.1v0.8h5.1c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4s-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2h-5.1
+		v0.8h3.8c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.2,0.3,0.2,0.6v3.1c0,0.2-0.1,0.4-0.2,0.6C41,37.7,40.8,37.7,40.6,37.7z M35.1,34.9V34
+		h-2.9v0.9H35.1z M35.1,36.7v-0.9h-2.9v0.9H35.1z M39.8,34.9V34h-2.9v0.9H39.8z M39.8,36.7v-0.9h-2.9v0.9H39.8z"/>
+	<path d="M45.5,41.1c-0.3,0.4-0.7,0.5-1.1,0.3c-0.4-0.3-0.5-0.7-0.3-1.1l1-1.7c0.3-0.4,0.7-0.5,1.1-0.3c0.4,0.3,0.5,0.7,0.3,1.1
+		L45.5,41.1z M55,37.7c-0.1,0-0.1,0-0.2,0h-8.9c-0.3,0-0.5-0.1-0.6-0.2c-0.2-0.2-0.2-0.4-0.2-0.6v-3.4c0-0.2,0.1-0.4,0.2-0.6
+		c0.1-0.1,0.3-0.2,0.6-0.2h3.3v-3.1c0-0.2,0.1-0.4,0.2-0.6c0.2-0.2,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2c0.2,0.2,0.2,0.4,0.2,0.6v0.3H56
+		c0.2,0,0.4,0.1,0.6,0.2c0.1,0.1,0.2,0.3,0.2,0.6s-0.1,0.4-0.2,0.5c-0.1,0.1-0.3,0.2-0.6,0.2h-5.2v1.3h4c0.2,0,0.4,0.1,0.6,0.2
+		c0.1,0.1,0.2,0.3,0.2,0.6v3.4C55.6,37.3,55.4,37.6,55,37.7z M53.9,36.2v-2h-7.1v2H53.9z M49.6,40.7c0,0.3-0.1,0.5-0.2,0.6
+		c-0.2,0.1-0.4,0.2-0.6,0.2c-0.2,0-0.4-0.1-0.6-0.2c-0.1-0.2-0.2-0.4-0.2-0.6l0-1.6c0-0.2,0.1-0.4,0.2-0.6c0.2-0.2,0.3-0.2,0.6-0.2
+		s0.4,0.1,0.6,0.2c0.2,0.2,0.2,0.4,0.2,0.6V40.7z M52.8,40.7c0,0.2-0.1,0.4-0.2,0.6c-0.2,0.1-0.4,0.2-0.6,0.2
+		c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.1-0.2-0.3-0.2-0.6l0-1.6c0-0.2,0.1-0.4,0.2-0.6c0.2-0.2,0.3-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2
+		c0.2,0.2,0.2,0.4,0.2,0.6V40.7z M56.6,40.3c0.2,0.4,0.1,0.8-0.3,1.1c-0.5,0.3-0.8,0.2-1.1-0.3l-1-1.7c-0.2-0.5-0.1-0.8,0.3-1.1
+		c0.5-0.2,0.9-0.1,1.1,0.3L56.6,40.3z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>