<?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:lang="en" 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 id='diagram' 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>