Embedding a template for SVG element instead of just styles

spec/parser/javascript_spec.js

@@ -60,32 +60,22 @@ describe('parser/javascript.js', function() {
       this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
       this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
 
-      this.svgStyles = 'example styles';
+      this.svgBase = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svt>';
       this.svgContainer = document.createElement('div');
     });
 
     it('creates the SVG element', function() {
       var svg;
 
-      this.parser.render(this.svgContainer, this.svgStyles);
+      this.parser.render(this.svgContainer, this.svgBase);
 
       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.svgContainer, this.svgStyles);
+      this.parser.render(this.svgContainer, this.svgBase);
       expect(this.parser.parsed.render).toHaveBeenCalled();
     });
 
@@ -100,7 +90,7 @@ describe('parser/javascript.js', function() {
           height: 24
         });
 
-        this.parser.render(this.svgContainer, this.svgStyles);
+        this.parser.render(this.svgContainer, this.svgBase);
         this.renderPromise.resolve(this.result);
 
         setTimeout(done, 10);

spec/regexper_spec.js

@@ -16,7 +16,7 @@ describe('regexper.js', function() {
       '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
       '<div id="progress"><div></div></div>',
       '<div id="regexp-render"></div>',
-      '<div id="svg-styles">example styles</div>'
+      '<script type="text/html" id="svg-base"><svg></svg></script>'
     ].join('');
 
     this.regexper = new Regexper(this.root);
@@ -429,7 +429,7 @@ describe('regexper.js', function() {
       });
 
       it('renders the expression', function() {
-        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgStyles);
+        expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svgContainer, this.regexper.svgBase);
       });
 
     });

src/js/main.js

@@ -32,7 +32,7 @@ import _ from 'lodash';
 
     setTimeout(() => {
       parser.parse(element.getAttribute('data-expr'))
-        .invoke('render', svg, document.querySelector('#svg-styles').innerHTML)
+        .invoke('render', svg, document.querySelector('#svg-base').innerHTML)
         .finally(() => {
           element.className = _.without(element.className.split(' '), 'loading').join(' ');
           element.removeChild(element.querySelector('.spinner'));

src/js/parser/javascript.js

@@ -32,23 +32,13 @@ export default class Parser {
     return deferred.promise;
   }
 
-  render(containerElement, styles) {
+  render(containerElement, svgBase) {
-    var svg,
+    var svg;
-        style = document.createElement('style');
 
-    containerElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>';
+    containerElement.innerHTML += svgBase;
 
     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 => {
         var box = result.getBBox();

src/js/regexper.js

@@ -14,7 +14,7 @@ export default class Regexper {
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
     this.percentage = root.querySelector('#progress div');
     this.svgContainer = root.querySelector('#regexp-render');
-    this.svgStyles = this.root.querySelector('#svg-styles').innerHTML;
+    this.svgBase = this.root.querySelector('#svg-base').innerHTML;
 
     this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq;
   }
@@ -158,7 +158,7 @@ export default class Regexper {
 
         throw message;
       })
-      .invoke('render', this.svgContainer, this.svgStyles)
+      .invoke('render', this.svgContainer, this.svgBase)
       .then(() => {
         this.state = 'has-results';
         this.updateLinks();

template.html

@@ -24,7 +24,13 @@
       </div>
     <![endif]-->
     <!--[if gt IE 8]> -->
-    <script type="text/css" id="svg-styles">${svgStyles}</script>
+    <script type="text/html" id="svg-base">
+      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <defs>
+          <style type="text/css">${svgStyles}</style>
+        </defs>
+      </svg>
+    </script>
 
     <header>
       <div class="logo">