.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
In index.html i have this code where images are defined.images which are not part of tree layout they are getting displayed
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link href="css/LatencySummary.css" rel="stylesheet" type="text/css">
<link href="css/NetworkTopology.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/d3/d3.v3.js"></script>
<script type="text/javascript" src="networkTopology.js"></script>
<title>JetPort UI</title>
<style type="text/css">
.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;
}
</style>
</head>
<body onload="loadGraph()">
<div id="bg">
<img id="imgBG" src="image/oceanBackground.png" alt="" height="100%"
width="100%">
</div>
<div id="titleDiv" style="height: 35px;">
<img id="logo" src="image/appLogo_white.png" height="100%" width="5%"
align="left"> <span
style="position: relative; top: 15px; left: 250px"> <font
face="Arial" size="5" color="white">Shooting Game Application</font>
</span>
</div>
<svg id="mySvg" width="10" height="10">
<defs id="mdef">
<filter id="webserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/web-servernew.png" />
</filter>
<filter id="container" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/container-osnew.png" />
</filter>
<filter id="containerCollapse" x="0%" y="0%" width="120%"
height="160%">
<feImage xlink:href="image/container-os-collapse.png" />
</filter>
<filter id="appserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/App-servernew.png" />
</filter>
<filter id="virtualMac" x="0%" y="0%" width="200%" height="200%">
<feImage xlink:href="image/virtual-machine.png" />
</filter>
<filter id="virtualMacCollapse" x="0%" y="0%" width="200%"
height="200%">
<feImage xlink:href="image/virtual-machine_collapse.png" />
</filter>
<filter id="dbserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/DB-servernew.png" />
</filter>
<filter id="network" x="0%" y="0%" width="200%" height="300%">
<feImage xlink:href="image/network.png" />
</filter>
<filter id="networkCollapse" x="0%" y="0%" width="200%" height="300%">
<feImage xlink:href="image/network-collapse.png" />
</filter>
<filter id="loadbalancer" x="0%" y="0%" width="150%" height="200%">
<feImage xlink:href="image/Dynamic-load-Balancer.png" />
</filter>
<filter id="storage" x="0%" y="0%" width="150%" height="200%">
<feImage xlink:href="image/network_storage.png" />
</filter>
</defs>
</svg>
<div id="tableDiv">
<table class="jumbotron" bgcolor="#B1C1CB" style="margin-left: 200px;">
<tr>
<td>
<div id="progressDiv">
<img id="progress" src="image/progressBar.gif"> <font
face="Arial" size="2" style="font-weight: bold" color="#0D0C0C">Loading...</font>
</div>
<div id="graph" class="chart" align="right" style="height: 250px"></div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div style="height: 2px; text-align: left;">
<span style="position: relative; right: -0.5%; font-weight: bold">
<font face="Arial" size="3" color="#040404">Network
Topology</font>
</span>
</div>
</td>
</tr>
<tr>
<td style="padding-left: 5px">
<div id="tree-container" onclick="divClick(event)"></div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/dynamicData.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
