fix: 🐛 apply css styles to svg elements

Author: bubkoo

src/cloneNode.ts

@@ -1,5 +1,5 @@
 import { clonePseudoElements } from './clonePseudoElements'
-import { createImage, toArray, svgToDataURL } from './util'
+import { createImage, toArray } from './util'
 
 async function cloneSingleNode(
   node: HTMLCanvasElement | SVGElement | HTMLElement,
@@ -13,11 +13,11 @@ async function cloneSingleNode(
     return createImage(dataURL)
   }
 
-  if (node.tagName && node.tagName.toLowerCase() === 'svg') {
-    return Promise.resolve(node as SVGElement)
-      .then((svg) => svgToDataURL(svg))
-      .then(createImage)
-  }
+  // if (node.tagName && node.tagName.toLowerCase() === 'svg') {
+  //   return Promise.resolve(node as SVGElement)
+  //     .then((svg) => svgToDataURL(svg))
+  //     .then(createImage)
+  // }
 
   return Promise.resolve(node.cloneNode(false) as HTMLElement)
 }

test/spec/index.spec.ts

@@ -249,6 +249,17 @@ describe('html to image', () => {
         .then(done)
         .catch(done)
     })
+
+    it('should render svg `<rect>` with applied css styles', (done) => {
+      Helper.bootstrap(
+        'svg-color/node.html',
+        'svg-color/style.css',
+        'svg-color/image',
+      )
+        .then(Helper.renderAndCheck)
+        .then(done)
+        .catch(done)
+    })
   })
 
   describe('work with options', () => {

test/spec/resources/svg-color/image

@@ -0,0 +1 @@
+data:image/png;base64,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

test/spec/resources/svg-color/node.html

@@ -0,0 +1,11 @@
+<svg
+  width="120"
+  height="120"
+  viewBox="0 0 120 120"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect class="rect" x="10" y="10" fill="red" width="100" height="100" />
+  <foreignObject x="20" y="20" width="120" height="120" requiredExtensions="http://www.w3.org/1999/xhtml">
+    <span style="color: white;">Foreign Object</span>
+  </foreignObject>
+</svg>

test/spec/resources/svg-color/style.css

@@ -0,0 +1,8 @@
+#dom-node {
+  width: 120px;
+  overflow: hidden;
+}
+
+.rect {
+  fill: black;
+}