Cytoscape.js SVG Background Issue

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.3.7/cytoscape.min.js"></script>
  </head>



<body onload="app.init()">
<h1>Cytoscape.js IE SVG background Demo</h1>

<div>The SVG background of the nodes is not visible in IE. Works fine in Chrome/FF.</div>
<br>


<div id="playground">

</div>
</body>
  
  

</html>

// Code goes here

var CanvasApp = function () {
            var cy;
            var playground;

            return {
                init: function () {
                    var elem = document.createElement("div");
                    elem.id = 'cy';

                    playground = document.getElementById('playground');
                    playground.appendChild(elem);

                    cy = $(elem).cytoscape({
                        style: [
                            {
                                selector: 'node',
                                css: {
                                    'content': 'data(name)',
                                    'background-image': 'file.svg',
                                    // 'background-image': 'http://png-4.findicons.com/files/icons/2015/24x24_free_application/24/text.png',
                                    'shape': 'rectangle',
                                    'height': '51px',
                                    'width': '41px',
                                    'background-opacity' : '0'
                                }
                            },

                            {
                                selector: 'edge',
                                css: {
                                    'target-arrow-shape': 'triangle'
                                }
                            }
                        ],

                        elements: {
                            nodes: [
                                {data: {id: 'j', name: 'Jerry'}},
                                {data: {id: 'e', name: 'Elaine'}},
                                {data: {id: 'k', name: 'Kramer'}},
                                {data: {id: 'g', name: 'George'}}
                            ],
                            edges: [
                                {data: {source: 'j', target: 'e'}},
                                {data: {source: 'j', target: 'k'}},
                                {data: {source: 'j', target: 'g'}},
                                {data: {source: 'e', target: 'j'}},
                                {data: {source: 'e', target: 'k'}},
                                {data: {source: 'k', target: 'j'}},
                                {data: {source: 'k', target: 'e'}},
                                {data: {source: 'k', target: 'g'}},
                                {data: {source: 'g', target: 'j'}}
                            ]
                        }
                    }).cytoscape('get');

                },

                destroy: function () {
                    cy.destroy();
                    cy = null;
                }
            }
        };


        var app = new CanvasApp();

/* Styles go here */

body {
  font-family: helvetica;
  font-size: 14px;
}
#cy {
  width: 600px; 
  height: 600px;
  border: 1px solid #888;
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="41px" height="51px" viewBox="0 0 41 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
    <title>file</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="file" sketch:type="MSLayerGroup">
            <g id="Page-1" sketch:type="MSShapeGroup">
                <g id="file">
                    <g id="Page-1">
                        <g id="file">
                            <circle id="Oval-1" stroke="#5E5757" stroke-width="2" cx="20.5" cy="25.5" r="7.5"></circle>
                            <circle id="Oval-3" stroke="#5E5757" stroke-width="2" fill="#5E5757" cx="20.5" cy="25.5" r="2.5"></circle>
                            <path d="M29.3343773,2.46035386 L26.8740234,0 L4.00590344,0 C1.79350406,0 0,1.78521308 0,4.0018845 L0,46.9981155 C0,49.2082953 1.78808228,51 4.00590344,51 L36.9940966,51 C39.2064959,51 41,49.2147869 41,46.9981155 L41,14.1259766 L32.0017115,5.12768808 L29.3405762,2.4593506 L29.3343773,2.46035386 L29.3343773,2.46035386 Z M38,11.1422106 L38,11.1259766 L32.0017115,5.12768808 L38,11.1422106 L38,11.1422106 Z M38,16 L38,46.9970177 C38,47.5546192 37.5479258,48 36.9902639,48 L4.00973606,48 C3.44252932,48 3,47.5509495 3,46.9970177 L3,4.0029823 C3,3.4453808 3.45207423,3 4.00973606,3 L26,3 L26,13.0012144 C26,14.6573979 27.3422643,16 28.9987856,16 L38,16 L38,16 Z" id="-file-frame" fill="#5E5757"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>