Fixing how styles are added to SVG documents to please IE

This also allowed the SVG element to be created in a single place

spec/parser/javascript_spec.js

@@ -61,18 +61,32 @@ describe('parser/javascript.js', function() {
       this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
 
       this.svgStyles = 'example styles';
-      this.svg = Snap(document.createElement('svg'));
-      spyOn(this.svg, 'group').and.returnValue('example group');
+      this.svgContainer = document.createElement('div');
     });
 
-    it('adds the svg styles to the svg element', function() {
-      this.parser.render(this.svg, this.svgStyles);
-      expect(this.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
+    it('creates the SVG element', function() {
+      var svg;
+
+      this.parser.render(this.svgContainer, this.svgStyles);
+
+      svg = this.svgContainer.querySelector('svg');
+      expect(svg.getAttribute('xmlns')).toEqual('http://www.w3.org/2000/svg');
+      expect(svg.getAttribute('version')).toEqual('1.1');
+    });
+
+    it('sets the styles on the SVG element', function() {
+      var styles;
+
+      this.parser.render(this.svgContainer, this.svgStyles);
+
+      styles = this.svgContainer.querySelector('svg defs style');
+      expect(styles.getAttribute('type')).toEqual('text/css');
+      expect(styles.firstChild.nodeValue).toEqual(this.svgStyles);
     });
 
     it('render the parsed expression', function() {
-      this.parser.render(this.svg, this.svgStyles);
-      expect(this.parser.parsed.render).toHaveBeenCalledWith('example group');
+      this.parser.render(this.svgContainer, this.svgStyles);
+      expect(this.parser.parsed.render).toHaveBeenCalled();
     });
 
     describe('when rendering is complete', function() {
@@ -86,9 +100,7 @@ describe('parser/javascript.js', function() {
           height: 24
         });
 
-        spyOn(this.svg, 'attr');
-
-        this.parser.render(this.svg, this.svgStyles);
+        this.parser.render(this.svgContainer, this.svgStyles);
         this.renderPromise.resolve(this.result);
 
         setTimeout(done, 10);
@@ -100,10 +112,10 @@ describe('parser/javascript.js', function() {
       });
 
       it('sets the dimensions of the image', function() {
-        expect(this.svg.attr).toHaveBeenCalledWith({
-          width: 62,
-          height: 44
-        });
+        var svg = this.svgContainer.querySelector('svg');
+
+        expect(svg.getAttribute('width')).toEqual('62');
+        expect(svg.getAttribute('height')).toEqual('44');
       });
 
     });

spec/regexper_spec.js

@@ -15,7 +15,7 @@ describe('regexper.js', function() {
       '<div><a href="#" data-glyph="link-intact"></a></div>',
       '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
       '<div id="progress"><div></div></div>',
-      '<div id="regexp-render"><svg></svg></div>',
+      '<div id="regexp-render"></div>',
       '<div id="svg-styles">example styles</div>'
     ].join('');
 
@@ -429,7 +429,7 @@ describe('regexper.js', function() {
       });
 
       it('renders the expression', function() {
-        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svg, this.regexper.svgStyles);
+        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgStyles);
       });
 
     });

src/index.html

@@ -26,10 +26,7 @@
 
   <ul id="warnings"></ul>
 
-  <!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
-  <div id="regexp-render">
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
-  </div>
+  <div id="regexp-render"></div>
 </div>
 
 <script src="/js/main.js" async defer></script>

src/js/main.js

@@ -20,7 +20,7 @@ import _ from 'lodash';
 
     element.className = _.compact([element.className, 'loading']).join(' ');
     element.innerHTML = [
-      '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>',
+      '<div class="svg"></div>',
       '<div class="spinner">',
         '<div></div>',
         '<div></div>',
@@ -28,7 +28,7 @@ import _ from 'lodash';
       element.innerHTML
     ].join('');
 
-    svg = element.querySelector('svg');
+    svg = element.querySelector('.svg');
 
     setTimeout(() => {
       parser.parse(element.getAttribute('data-expr'))

src/js/parser/javascript.js

@@ -32,16 +32,22 @@ export default class Parser {
     return deferred.promise;
   }
 
-  render(svgElement, styles) {
-    var svg;
+  render(containerElement, styles) {
+    var svg,
+        style = document.createElement('style');
 
-    svgElement.innerHTML = [
-      '<style type="text/css">',
-      styles,
-      '</style>'
-    ].join('');
+    containerElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>';
 
-    svg = Snap(svgElement);
+    svg = Snap(containerElement.querySelector('svg'));
+
+    style.setAttribute('type', 'text/css');
+    if (style.styleSheet) {
+      style.styleSheet.cssText = styles;
+    } else {
+      style.appendChild(document.createTextNode(styles));
+    }
+
+    svg.select('defs').append(style);
 
     return this.parsed.render(svg.group())
       .then(result => {

src/js/regexper.js

@@ -13,7 +13,7 @@ export default class Regexper {
     this.permalink = root.querySelector('a[data-glyph="link-intact"]');
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
     this.percentage = root.querySelector('#progress div');
-    this.svg = root.querySelector('#regexp-render svg');
+    this.svgContainer = root.querySelector('#regexp-render');
     this.svgStyles = this.root.querySelector('#svg-styles').innerHTML;
 
     this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq;
@@ -108,7 +108,7 @@ export default class Regexper {
   updateLinks() {
     try {
       this.download.parentNode.style.display = null;
-      this.download.href = this.buildBlobURL(this.svg.parentNode.innerHTML);
+      this.download.href = this.buildBlobURL(this.svgContainer.innerHTML);
     }
     catch(e) {
       // Blobs or URLs created from them don't work here.
@@ -158,7 +158,7 @@ export default class Regexper {
 
         throw message;
       })
-      .invoke('render', this.svg, this.svgStyles)
+      .invoke('render', this.svgContainer, this.svgStyles)
       .then(() => {
         this.state = 'has-results';
         this.updateLinks();

src/sass/main.scss

@@ -264,12 +264,17 @@ header {
           margin-left: -24px;
         }
 
-        svg {
+        .svg {
           position: absolute;
           top: -10000px;
         }
       }
 
+      .svg {
+        margin: 0;
+        text-align: center;
+      }
+
       figcaption {
         @include adjust-font-size-to($base-font-size);
         background: $green;