Fix encoding % sign breaking SVG background (#1097)

lib/dom-to-image.js

@@ -65,7 +65,8 @@
         return makeSvgDataUri(
           clone,
           options.width || util.width(node),
-          options.height || util.height(node)
+          options.height || util.height(node),
+          options.escapePercentSign
         )
       })
 
@@ -101,7 +102,9 @@
    * @return {Promise} - A promise that is fulfilled with a PNG image data URL
    * */
   function toPng(node, options) {
-    return draw(node, options || {}).then(function (canvas) {
+    options = options || {}
+    options.escapePercentSign = true
+    return draw(node, options).then(function (canvas) {
       return canvas.toDataURL()
     })
   }
@@ -124,7 +127,9 @@
    * @return {Promise} - A promise that is fulfilled with a PNG image blob
    * */
   function toBlob(node, options) {
-    return draw(node, options || {}).then(util.canvasToBlob)
+    options = options || {}
+    options.escapePercentSign = true
+    return draw(node, options).then(util.canvasToBlob)
   }
 
   function copyOptions(options) {
@@ -316,13 +321,15 @@
     })
   }
 
-  function makeSvgDataUri(node, width, height) {
+  function makeSvgDataUri(node, width, height, escapePercentSign) {
     return Promise.resolve(node)
       .then(function (node) {
         node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
         return new XMLSerializer().serializeToString(node)
       })
-      .then(util.escapeXhtml)
+      .then(function (str) {
+        return util.escapeXhtml(str, escapePercentSign)
+      })
       .then(function (xhtml) {
         return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>'
       })
@@ -545,8 +552,11 @@
       return array
     }
 
-    function escapeXhtml(string) {
+    function escapeXhtml(string, escapePercentSign) {
-      return string.replace(/%/g, '%25').replace(/#/g, '%23').replace(/\n/g, '%0A')
+      if (escapePercentSign) {
+        string = string.replace(/%/g, '%25')
+      }
+      return string.replace(/#/g, '%23').replace(/\n/g, '%0A')
     }
 
     function width(node) {