Belows are codes.
Or try this(temporarily): http://ihome.ust.hk/~cs_lyfac/svgQuestion/a.html
When you hit enter it is fine and svgDocument object is alerted. But if you refresh it, it is undefined. Why? Moreover, it is always undefined when in local mode.
<html>
<head>
<title>Animating SVG</title>
<script type="text/javascript" src="gear.js"></script>
</head>
<body bgcolor="#CCAAFF" onload="RotateSVG()">
<object id="gear" data="gear.svg" type="image/svg+xml"
width="500" height="500"
style="position: absolute; top: -250px; left: -250px;">
</object>
</body>
</html>
and
function RotateSVG()
{
var svgTag = document.getElementById("gear");
var svgDoc = null;
svgDoc = svgTag.getSVGDocument();
alert(svgDoc);
}
and
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">
<!-- http://www.mozilla.org/projects/svg/ -->
<g id="gearG" fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>