Add 'modifyCss' option. Improve docs. Some cleanup.

Author: exupero

README.md

@@ -47,16 +47,17 @@ If you want to use TypeScript, necessary [type definitions](https://github.com/m
 ### Options
 
 - `backgroundColor` — Creates a PNG with the given background color. Defaults to transparent.
-- `left` - Specify the viewbox's left position. Defaults to 0.
+- `canvg` - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer
+- `encoderOptions` - A Number between 0 and 1 indicating image quality. The default is 0.8
+- `encoderType` - A DOMString indicating the image format. The default type is image/png.
 - `height` - Specify the image's height. Defaults to the viewbox's height if given, or the element's non-percentage height, or the element's bounding box's height, or the element's CSS height, or the computed style's height, or 0.
+- `left` - Specify the viewbox's left position. Defaults to 0.
+- `modifyCss` - A function that takes a CSS rule's selector and properties and returns a string of CSS. Supercedes `selectorRemap` and `modifyStyle`. Useful for modifying properties only for certain CSS selectors.
+- `modifyStyle` - A function that takes a CSS rule's properties and returns a string of CSS. Useful for modifying properties before they're inlined into the SVG.
 - `scale` — Changes the resolution of the output PNG. Defaults to `1`, the same dimensions as the source SVG.
 - `selectorRemap` — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.
-- `modifyStyle` - A function that takes CSS styles and returns replacement styles. 
 - `top` - Specify the viewbox's top position. Defaults to 0.
 - `width` - Specify the image's width. Defaults to the viewbox's width if given, or the element's non-percentage width, or the element's bounding box's width, or the element's CSS width, or the computed style's width, or 0.
-- `encoderType` - A DOMString indicating the image format. The default type is image/png.
-- `encoderOptions` - A Number between 0 and 1 indicating image quality. The default is 0.8
-- `canvg` - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer
 
 ### Testing
 

index.html

@@ -63,6 +63,10 @@
     fill: green !important;
   }
 
+  #selectors-prefixed rect.css-styled {
+    fill: green !important;
+  }
+
   /* Invalid selectors */
 
   [ng\:cloak] {
@@ -192,6 +196,20 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
       </svg>
     </li>
 
+    <li id=modified-style>
+      <svg width=200 height=200>
+        <rect x=0 y=50 width=100 height=100></rect>
+        <rect class=css-styled x=100 y=50 width=100 height=100></rect>
+      </svg>
+    </li>
+
+    <li id=modified-css>
+      <svg width=200 height=200>
+        <rect x=0 y=50 width=100 height=100></rect>
+        <rect class=css-styled x=100 y=50 width=100 height=100></rect>
+      </svg>
+    </li>
+
     <li id=group>
       <svg width=200 height=200>
         <g id=sub-group transform="translate(40,40)">
@@ -347,6 +365,16 @@ <h3>Preview <button class="save btn">Save as PNG</button></h3>
   inlineTest('When CSS styling selectors are prefixed', $('#selectors-prefixed'), {
     selectorRemap: function(s) {return s.replace('#selectors-prefixed ', '')}
   });
+  inlineTest('Modifying the style', $('#modified-style'), {
+    modifyStyle: function(s) {return s.replace('green', 'red')}
+  });
+  inlineTest('Modifying the whole CSS rule', $('#modified-css'), {
+    modifyCss: function(selector, properties) {
+      selector = selector.replace('#selectors-prefixed ', '');
+      properties = properties.replace('green', 'blue');
+      return selector + '{' + properties + '}';
+    }
+  });
   inlineTest('Exporting a group within an SVG', $('#group'), null, {
     selector: '#sub-group'
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "save-svg-as-png",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Convert a browser SVG to PNG or dataUri",
   "main": "saveSvgAsPng.js",
   "scripts": {

saveSvgAsPng.js

@@ -69,9 +69,14 @@
   function styles(el, options, cssLoadedCallback) {
     var selectorRemap = options.selectorRemap;
     var modifyStyle = options.modifyStyle;
+    var modifyCss = options.modifyCss || function(selector, properties) {
+      var selector = selectorRemap ? selectorRemap(selector) : selector;
+      var cssText = modifyStyle ? modifyStyle(properties) : properties;
+      return selector + " { " + cssText + " }\n";
+    };
     var css = "";
-    // each font that has extranl link is saved into queue, and processed
-    // asynchronously
+
+    // Each font that has an external link is saved into queue, and processed asynchronously.
     var fontsQueue = [];
     var sheets = document.styleSheets;
     for (var i = 0; i < sheets.length; i++) {
@@ -103,9 +108,7 @@
             }
 
             if (match) {
-              var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText;
-              var cssText = modifyStyle ? modifyStyle(rule.style.cssText) : rule.style.cssText;
-              css += selector + " { " + cssText + " }\n";
+              css += modifyCss(rule.selectorText, rule.style.cssText);
             } else if(rule.cssText.match(/^@font-face/)) {
               // below we are trying to find matches to external link. E.g.
               // @font-face {
@@ -373,13 +376,13 @@
 
       var pixelRatio = window.devicePixelRatio || 1;
 
-      canvas.style.width = canvas.width +'px';
-      canvas.style.height = canvas.height +'px';
+      canvas.style.width = canvas.width+'px';
+      canvas.style.height = canvas.height+'px';
       canvas.width *= pixelRatio;
       canvas.height *= pixelRatio;
 
       context.setTransform(pixelRatio,0,0,pixelRatio,0,0);
-      
+
       if(options.canvg) {
         options.canvg(canvas, src);
       } else {