set url to gradient definition as an 'attribute', not in 'style'

- so that we don't have to fiddle with quotes inside of quotes
  in Snapshot.toSVG
- clear corresponding 'style' setting to avoid potential conflicts
- adapt toSVG tests

Author: etpinard

Diff for: src/components/drawing/index.js

@@ -334,7 +334,11 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
             });
         });
 
-    sel.style(prop, 'url(#' + fullID + ')')
+    // Set url to gradient definition as an 'attribute', so that
+    // we don't have to fiddle with quotes inside of quotes in Snapshot.toSVG.
+    // Clear corresponding 'style' setting to avoid potential conflicts.
+    sel.attr(prop, 'url(#' + fullID + ')')
+        .style(prop, null)
         .style(prop + '-opacity', null);
 };
 

Diff for: src/snapshot/tosvg.js

@@ -116,22 +116,6 @@ module.exports = function toSVG(gd, format, scale) {
             }
         });
 
-    svg.selectAll('.point, .scatterpts, .legendfill>path, .legendlines>path, .cbfill').each(function() {
-        var pt = d3.select(this);
-
-        // similar to font family styles above,
-        // we must remove " after the SVG DOM has been serialized
-        var fill = this.style.fill;
-        if(fill && fill.indexOf('url(') !== -1) {
-            pt.style('fill', fill.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
-        }
-
-        var stroke = this.style.stroke;
-        if(stroke && stroke.indexOf('url(') !== -1) {
-            pt.style('stroke', stroke.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.

Diff for: test/jasmine/tests/snapshot_test.js

@@ -254,7 +254,7 @@ describe('Plotly.Snapshot', function() {
         describe('should handle quoted style properties', function() {
             function checkURL(actual, msg) {
                 // which is enough tot check that toSVG did its job right
-                expect((actual || '').substr(0, 6)).toBe('url(\"#', msg);
+                expect((actual || '').substr(0, 5)).toBe('url(#', msg);
             }
 
             it('- marker-gradient case', function(done) {
@@ -277,7 +277,7 @@ describe('Plotly.Snapshot', function() {
                     });
 
                     d3.selectAll('.point,.scatterpts').each(function() {
-                        checkURL(this.style.fill);
+                        checkURL(d3.select(this).attr('fill'));
                     });
 
                     return Plotly.Snapshot.toSVG(gd);
@@ -297,12 +297,12 @@ describe('Plotly.Snapshot', function() {
                     expect(pointElements.length).toEqual(3);
 
                     for(i = 0; i < pointElements.length; i++) {
-                        checkURL(pointElements[i].style.fill);
+                        checkURL(pointElements[i].getAttribute('fill'));
                     }
 
                     var legendPointElements = svgDOM.getElementsByClassName('scatterpts');
                     expect(legendPointElements.length).toEqual(1);
-                    checkURL(legendPointElements[0].style.fill);
+                    checkURL(legendPointElements[0].getAttribute('fill'));
                 })
                 .catch(failTest)
                 .then(done);
@@ -319,11 +319,12 @@ describe('Plotly.Snapshot', function() {
 
                     var fillItems = svgDOM.getElementsByClassName('legendfill');
                     for(var i = 0; i < fillItemIndices.length; i++) {
-                        checkURL(fillItems[fillItemIndices[i]].firstChild.style.fill, 'fill gradient ' + i);
+                        var path = fillItems[fillItemIndices[i]].firstChild;
+                        checkURL(path.getAttribute('fill'), 'fill gradient ' + i);
                     }
 
                     var lineItems = svgDOM.getElementsByClassName('legendlines');
-                    checkURL(lineItems[1].firstChild.style.stroke, 'stroke gradient');
+                    checkURL(lineItems[1].firstChild.getAttribute('stroke'), 'stroke gradient');
                 })
                 .catch(failTest)
                 .then(done);
@@ -340,7 +341,7 @@ describe('Plotly.Snapshot', function() {
                     var fillItems = svgDOM.getElementsByClassName('cbfill');
                     expect(fillItems.length).toBe(1, '# of colorbars');
                     for(var i = 0; i < fillItems.length; i++) {
-                        checkURL(fillItems[i].style.fill, 'fill gradient ' + i);
+                        checkURL(fillItems[i].getAttribute('fill'), 'fill gradient ' + i);
                     }
                 })
                 .catch(failTest)