Merge pull request #1694 from plotly/fix-tosvg-for-marker-gradients

Fix toImage for marker gradient

Author: etpinard

src/snapshot/tosvg.js

@@ -16,6 +16,9 @@ var Drawing = require('../components/drawing');
 var Color = require('../components/color');
 
 var xmlnsNamespaces = require('../constants/xmlns_namespaces');
+var DOUBLEQUOTE_REGEX = /"/g;
+var DUMMY_SUB = 'TOBESTRIPPED';
+var DUMMY_REGEX = new RegExp('("' + DUMMY_SUB + ')|(' + DUMMY_SUB + '")', 'g');
 
 
 module.exports = function toSVG(gd, format) {
@@ -90,10 +93,21 @@ module.exports = function toSVG(gd, format) {
             // to a string (browsers convert singles back)
             var ff = txt.style('font-family');
             if(ff && ff.indexOf('"') !== -1) {
-                txt.style('font-family', ff.replace(/"/g, 'TOBESTRIPPED'));
+                txt.style('font-family', ff.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
             }
         });
 
+    svg.selectAll('.point').each(function() {
+        var pt = d3.select(this);
+        var fill = pt.style('fill');
+
+        // similar to font family styles above,
+        // we must remove " after the SVG DOM has been serialized
+        if(fill && fill.indexOf('url(') !== -1) {
+            pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
+        }
+    });
+
     if(format === 'pdf' || format === 'eps') {
         // these formats make the extra line MathJax adds around symbols look super thick in some cases
         // it looks better if this is removed entirely.
@@ -110,8 +124,8 @@ module.exports = function toSVG(gd, format) {
     s = svgTextUtils.html_entity_decode(s);
     s = svgTextUtils.xml_entity_encode(s);
 
-    // Fix quotations around font strings
-    s = s.replace(/("TOBESTRIPPED)|(TOBESTRIPPED")/g, '\'');
+    // Fix quotations around font strings and gradient URLs
+    s = s.replace(DUMMY_REGEX, '\'');
 
     return s;
 };

test/jasmine/tests/snapshot_test.js

@@ -3,6 +3,7 @@ var Plotly = require('@lib/index');
 var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var fail = require('../assets/fail_test');
 
 var subplotMock = require('../../image/mocks/multiple_subplots.json');
 var annotationMock = require('../../image/mocks/annotations.json');
@@ -191,16 +192,15 @@ describe('Plotly.Snapshot', function() {
     });
 
     describe('toSVG', function() {
-        var parser = new DOMParser(),
-            gd;
+        var parser = new DOMParser();
+        var gd;
 
         beforeEach(function() {
             gd = createGraphDiv();
         });
 
         afterEach(destroyGraphDiv);
 
-
         it('should not return any nested svg tags of plots', function(done) {
             Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() {
                 return Plotly.Snapshot.toSVG(gd);
@@ -245,5 +245,53 @@ describe('Plotly.Snapshot', function() {
                 done();
             });
         });
+
+        it('should handle quoted style properties', function(done) {
+            Plotly.plot(gd, [{
+                y: [1, 2, 1],
+                marker: {
+                    gradient: {
+                        type: 'radial',
+                        color: '#fff'
+                    },
+                    color: ['red', 'blue', 'green']
+                }
+            }], {
+                font: { family: 'Times New Roman' }
+            })
+            .then(function() {
+                d3.selectAll('text').each(function() {
+                    var tx = d3.select(this);
+                    expect(tx.style('font-family')).toEqual('\"Times New Roman\"');
+                });
+
+                d3.selectAll('.point').each(function() {
+                    var pt = d3.select(this);
+                    expect(pt.style('fill').substr(0, 6)).toEqual('url(\"#');
+                });
+
+                return Plotly.Snapshot.toSVG(gd);
+            })
+            .then(function(svg) {
+                var svgDOM = parser.parseFromString(svg, 'image/svg+xml');
+                var i;
+
+                var textElements = svgDOM.getElementsByTagName('text');
+                expect(textElements.length).toEqual(11);
+
+                for(i = 0; i < textElements.length; i++) {
+                    expect(textElements[i].style['font-family']).toEqual('\"Times New Roman\"');
+                }
+
+                var pointElements = svgDOM.getElementsByClassName('point');
+                expect(pointElements.length).toEqual(3);
+
+                for(i = 0; i < pointElements.length; i++) {
+                    expect(pointElements[i].style.fill.substr(0, 6)).toEqual('url(\"#');
+                }
+            })
+            .catch(fail)
+            .then(done);
+        });
     });
 });