I will use the embed tag.
Old stuff:
frameset.html
<html>
<head><title>Frameset with SVG</title></head>
<frameset cols="50%, 50%">
<frame src="frame1.html">
<frame src="circle.svg">
</frameset>
</html>
frame1.html
<html><head>
<script type="text/javascript">
function test()
{
doc = parent.frames[1].document;//after KB925454 - access denied
var svgdoc = false;
try
{//IE -adobe stuff
svgdoc = doc.embeds[0].getSVGDocument();
}
catch(e)
{//FireFox
svgdoc = doc;
}
if(svgdoc)
{
circle = svgdoc.getElementById('c1');
var r = (circle.getAttribute('r') == "20")?'50':'20';
circle.setAttribute('r', r);
}
}
</script>
</head><body>
<p onclick="test()" >Test</p>
</body></html>
circle.svg
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<circle id="c1" cx="100" cy="50" r="20" style="fill:#F00" onclick="alert('Hi')" />
</svg>
New stuff:
frameset.html
<html>
<head><title>Frameset with SVG in embed</title></head>
<frameset cols="50%, 50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>
frame1.html
<html><head>
<script type="text/javascript">
function test()
{
circle = parent.frames[1].document.getElementsByTagName('embed')[0].getSVGDocument().getElementById('c1');
var r = (circle.getAttribute('r') == "20")?'50':'20';
circle.setAttribute('r', r);
}
</script>
</head><body>
<p onclick="test()" >Test</p>
</body></html>
frame2.html
<html>
<body>
<embed width=100% height=100% fullscreen=yes src="circle.svg" />
</body>
</html>
