title: issue with displaying png images of tree layout are not getting displayed in safari browser(windows)
body: <p>.png images of D3 tree layout are not getting displayed in safari browser(windows).In Firefox and chrome it is working fine.where as other png images which are not part of tree layout are displayed</p>
  
  <p>In index.html i have this code where images are defined.images which are not part of tree layout they are getting displayed</p>
  
  <pre><code>            &lt;!DOCTYPE HTML&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;html&gt;
              &lt;head&gt;
  
              &lt;link href="css/LatencySummary.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/NetworkTopology.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  
              &lt;script type="text/javascript" src="js/d3/d3.v3.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="networkTopology.js"&gt;&lt;/script&gt;
  
              &lt;title&gt;JetPort UI&lt;/title&gt;
  
              &lt;style type="text/css"&gt;
              .node {
                  cursor: pointer;
              }
  
              .overlay {
                  background-color: #fff;
              }
  
              .node circle {
                  fill: #fff;
                  stroke: #fff;
                  stroke-width: 1.5px;
              }
  
              .node text {
                  font-size: 10px;
                  font-family: sans-serif;
              }
  
              .link {
                  fill: none;
                  stroke: #ccc;
                  stroke-width: 2px;
              }
  
              .templink {
                  fill: none;
                  stroke: red;
                  stroke-width: 3px;
              }
  
              .ghostCircle.show {
                  display: block;
              }
  
              .ghostCircle,.activeDrag .ghostCircle {
                  display: none;
              }
              &lt;/style&gt;
  
              &lt;/head&gt;
              &lt;body onload="loadGraph()"&gt;
                  &lt;div id="bg"&gt;
                      &lt;img id="imgBG" src="image/oceanBackground.png" alt="" height="100%"
                          width="100%"&gt;
                  &lt;/div&gt;
  
                  &lt;div id="titleDiv" style="height: 35px;"&gt;
                      &lt;img id="logo" src="image/appLogo_white.png" height="100%" width="5%"
                          align="left"&gt; &lt;span
                          style="position: relative; top: 15px; left: 250px"&gt; &lt;font
                          face="Arial" size="5" color="white"&gt;Shooting Game Application&lt;/font&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;svg id="mySvg" width="10" height="10"&gt;
                   &lt;defs id="mdef"&gt;
  
                       &lt;filter id="webserver" x="0%" y="0%" width="120%" height="140%"&gt;
                          &lt;feImage xlink:href="image/web-servernew.png" /&gt;
                      &lt;/filter&gt;
  
                      &lt;filter id="container" x="0%" y="0%" width="120%" height="140%"&gt;
                          &lt;feImage xlink:href="image/container-osnew.png" /&gt;
                      &lt;/filter&gt;
                      &lt;filter id="containerCollapse" x="0%" y="0%" width="120%"
                          height="160%"&gt;
                          &lt;feImage xlink:href="image/container-os-collapse.png" /&gt;
                      &lt;/filter&gt;      
                       &lt;filter id="appserver" x="0%" y="0%" width="120%" height="140%"&gt;
                          &lt;feImage xlink:href="image/App-servernew.png" /&gt;
                      &lt;/filter&gt;
  
                      &lt;filter id="virtualMac" x="0%" y="0%" width="200%" height="200%"&gt;
                          &lt;feImage xlink:href="image/virtual-machine.png" /&gt;
                      &lt;/filter&gt;
                       &lt;filter id="virtualMacCollapse" x="0%" y="0%" width="200%"
                          height="200%"&gt;
                          &lt;feImage xlink:href="image/virtual-machine_collapse.png" /&gt;
                      &lt;/filter&gt;
  
                       &lt;filter id="dbserver" x="0%" y="0%" width="120%" height="140%"&gt;
                          &lt;feImage xlink:href="image/DB-servernew.png" /&gt;
                      &lt;/filter&gt;   
                      &lt;filter id="network" x="0%" y="0%" width="200%" height="300%"&gt;
                          &lt;feImage xlink:href="image/network.png" /&gt; 
                      &lt;/filter&gt;
                      &lt;filter id="networkCollapse" x="0%" y="0%" width="200%" height="300%"&gt;
                          &lt;feImage xlink:href="image/network-collapse.png" /&gt; 
                      &lt;/filter&gt;   
                      &lt;filter id="loadbalancer" x="0%" y="0%" width="150%" height="200%"&gt;
                          &lt;feImage xlink:href="image/Dynamic-load-Balancer.png" /&gt; 
                      &lt;/filter&gt;
                      &lt;filter id="storage" x="0%" y="0%" width="150%" height="200%"&gt;
                          &lt;feImage xlink:href="image/network_storage.png" /&gt; 
                      &lt;/filter&gt;
                     &lt;/defs&gt;
               &lt;/svg&gt;
  
                  &lt;div id="tableDiv"&gt;
                      &lt;table class="jumbotron" bgcolor="#B1C1CB" style="margin-left: 200px;"&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;div id="progressDiv"&gt;
                                      &lt;img id="progress" src="image/progressBar.gif"&gt; &lt;font
                                          face="Arial" size="2" style="font-weight: bold" color="#0D0C0C"&gt;Loading...&lt;/font&gt;
                                  &lt;/div&gt;
                                  &lt;div id="graph" class="chart" align="right" style="height: 250px"&gt;&lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;div style="height: 2px; text-align: left;"&gt;
                                      &lt;span style="position: relative; right: -0.5%; font-weight: bold"&gt;
                                          &lt;font face="Arial" size="3" color="#040404"&gt;Network
                                              Topology&lt;/font&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="padding-left: 5px"&gt;
                                  &lt;div id="tree-container" onclick="divClick(event)"&gt;&lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                      &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;script type="text/javascript" src="js/dynamicData.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript" src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript" src="js/jquery.mockjax.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>