snapshot: force *visibility: visible* for text elements ...

 with *visibility: inherit* on SVG export

Author: etpinard

src/snapshot/tosvg.js

@@ -71,12 +71,19 @@ module.exports = function toSVG(gd, format) {
     svg.selectAll('text')
         .attr('data-unformatted', null)
         .each(function() {
-            // hidden text is pre-formatting mathjax, the browser ignores it but it can still confuse batik
             var txt = d3.select(this);
+
+            // hidden text is pre-formatting mathjax,
+            // the browser ignores it but it can still confuse batik
             if(txt.style('visibility') === 'hidden') {
                 txt.remove();
                 return;
             }
+            else {
+                // force other visibility value to export as visible
+                // to not potentially confuse non-browser SVG implementations
+                txt.style('visibility', 'visible');
+            }
 
             // Font family styles break things because of quotation marks,
             // so we must remove them *after* the SVG DOM has been serialized

test/jasmine/tests/snapshot_test.js

@@ -1,6 +1,9 @@
 var Plotly = require('@lib/index');
+
+var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+
 var subplotMock = require('../../image/mocks/multiple_subplots.json');
 var annotationMock = require('../../image/mocks/annotations.json');
 
@@ -181,5 +184,28 @@ describe('Plotly.Snapshot', function() {
                 expect(svgElements.length).toBe(1);
             }).then(done);
         });
+
+        it('should force *visibility: visible* for text elements with *visibility: inherit*', function(done) {
+            d3.select(gd).style('visibility', 'inherit');
+
+            Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() {
+
+                d3.select(gd).selectAll('text').each(function() {
+                    expect(d3.select(this).style('visibility')).toEqual('visible');
+                });
+
+                return Plotly.Snapshot.toSVG(gd);
+            })
+            .then(function(svg) {
+                var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
+                    textElements = svgDOM.getElementsByTagName('text');
+
+                for(var i = 0; i < textElements.length; i++) {
+                    expect(textElements[i].style.visibility).toEqual('visible');
+                }
+
+                done();
+            });
+        });
     });
 });