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

- see #2914 (comment)
  for more info.

This reverts commit 1c8017e.

Author: etpinard

src/components/drawing/index.js

@@ -334,11 +334,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
             });
         });
 
-    // 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)
+    sel.style(prop, 'url(#' + fullID + ')')
         .style(prop + '-opacity', null);
 };
 

src/snapshot/tosvg.js

@@ -116,6 +116,22 @@ 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.

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, 5)).toBe('url(#', msg);
+                expect((actual || '').substr(0, 6)).toBe('url(\"#', msg);
             }
 
             it('- marker-gradient case', function(done) {
@@ -277,7 +277,7 @@ describe('Plotly.Snapshot', function() {
                     });
 
                     d3.selectAll('.point,.scatterpts').each(function() {
-                        checkURL(d3.select(this).attr('fill'));
+                        checkURL(this.style.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].getAttribute('fill'));
+                        checkURL(pointElements[i].style.fill);
                     }
 
                     var legendPointElements = svgDOM.getElementsByClassName('scatterpts');
                     expect(legendPointElements.length).toEqual(1);
-                    checkURL(legendPointElements[0].getAttribute('fill'));
+                    checkURL(legendPointElements[0].style.fill);
                 })
                 .catch(failTest)
                 .then(done);
@@ -319,12 +319,11 @@ describe('Plotly.Snapshot', function() {
 
                     var fillItems = svgDOM.getElementsByClassName('legendfill');
                     for(var i = 0; i < fillItemIndices.length; i++) {
-                        var path = fillItems[fillItemIndices[i]].firstChild;
-                        checkURL(path.getAttribute('fill'), 'fill gradient ' + i);
+                        checkURL(fillItems[fillItemIndices[i]].firstChild.style.fill, 'fill gradient ' + i);
                     }
 
                     var lineItems = svgDOM.getElementsByClassName('legendlines');
-                    checkURL(lineItems[1].firstChild.getAttribute('stroke'), 'stroke gradient');
+                    checkURL(lineItems[1].firstChild.style.stroke, 'stroke gradient');
                 })
                 .catch(failTest)
                 .then(done);
@@ -341,7 +340,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].getAttribute('fill'), 'fill gradient ' + i);
+                        checkURL(fillItems[i].style.fill, 'fill gradient ' + i);
                     }
                 })
                 .catch(failTest)