<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>XHTML example for creating circles dynamically
by clicking a button</title>
<style type="text/css"><![CDATA[
circle {
fill: lime;
stroke: black;
stroke-width: 0.2cm;
}
]]></style>
<script type="application/javascript"><![CDATA[
function create_circle()
{
var svg = document.getElementById('diagram');
var cx = Math.random()*10;
var cy = Math.random()*4;
var r = Math.round(Math.random()*4);
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
circle.setAttribute('cx', cx+'cm')
circle.setAttribute('cy', cy+'cm')
circle.setAttribute('r', r+'cm')
svg.appendChild(circle)
}
]]></script>
</head>
<body>
<svg:svg version="1.1" width="600" height="220">
<svg:title>Create circles dynamically</svg:title>
</svg:svg>
<button onclick="create_circle();">Create circle</button>
</body>
</html>