I have a Problem with JavaScript in SVG. It works fine in Firefox, but not in the Internet Explorer.
I just want to change a Symbol, but the Internet Explorer stop working if the Symbol is changed once. Only first changing of Symbol is working. Normally it should toggle by each click.
In function "toggle" is the comment "//alert("crazy");"...and the crazy thing is, that it works in the IE if you do this alert.
Code: Select all
<?xml version="1.0" encoding="iso-8859-1" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script language="JavaScript" type="text/javascript">
<![CDATA[
var display = true;
function toggle(className)
{
//alert("crazy");
if(display == false){
display = true;
document.getElementById(className).setAttribute('xlink:href','#red');
}
else{
display = false;
document.getElementById(className).setAttribute('xlink:href','#green');
}
}
]]></script>
<defs>
<symbol id="red">
<rect width="25" height="25" style="fill:rgb(255,0,0);"/>
</symbol>
<symbol id="green">
<rect width="50" height="50" style="fill:rgb(0,255,0);"/>
</symbol>
</defs>
<a xlink:href="javascript:toggle('Rectangle');">
<use xlink:href="#red" x="100" y="100" id="Rectangle"/>
</a>
</svg>
I hope somebody knows an issue.
Thanks and Greetings