Lo que quiero hacer es que la pantalla aparezca en blanco. Entonces cuando le de un click en cualquier lado de la pantalla me aparezca un circulo de tamaño random y color random. Después cuando le de otro click en otro lado de la pantalla aparezca otro circulo de tamaño random y color random(y que el anterior circulo no desaparezca). El punto es que cada vez que de click en cualquier parte de la pantalla aparezca un circulo de color random y tamaño random, sin que desaparezcan los demás circulos.
Aquí les pongo el código de lo que tengo hecho:
Código PHP:
<svg width="800" height="600" onload="Init( evt )" >
<script type="text/ecmascript">
var svgRoot;
var mouseP, newP, circP;
var bmousedown = 0 ;
var circpoint,circpointlabel;
function Init(evt){
svgRoot = document.documentElement;
mouseP = svgRoot.createSVGPoint() ;
newP = svgRoot.createSVGPoint();
circP = svgRoot.createSVGPoint();
circpoint = document.getElementById("circpoint");
circpointlabel = document.getElementById("circpointlabel");
}
function getUserCoordinates(p1){
var p1;
var p2 = svgRoot.createSVGPoint();
/*p2.x = p1.x - 400;
p2.y = 300 -p1.y;*/
return p2;
}
function getMouse(evt){
var pos = svgRoot.createSVGPoint();
pos.x = evt.clientX;
pos.y = evt.clientY;
return pos;
}
function onMouseMove(evt){
if(bmousedown) {
mouseP=getMouse(evt);
newP=getUserCoordinates(mouseP);
doUpdate();
}
}
function onMouseDown(evt) {
bmousedown = 1 ;
mouseP = getMouse(evt) ;
newP = getUserCoordinates(mouseP) ;
doUpdate() ;
}
function onMouseUp(evt) {
bmousedown = 0 ;
}
function doUpdate(){
circP.x = mouseP.x;
circP.y = mouseP.y;
circpoint.setAttributeNS(null, "cx", circP.x );
circpoint.setAttributeNS(null, "cy", circP.y );
circpointlabel.setAttributeNS(null, "x", circP.x-10 );
circpointlabel.setAttributeNS(null, "y", circP.y+25 );
}
</script>
<g transform = "translate(0, 0)" >
<circle id="circpoint" class="point" cx="13" cy="20" r="15" style="fill:red;" />
</g>
<rect id="canvas" x="0" y="0" width="800" height="600" opacity="0"
pointer-events="visible"
onmousemove="onMouseMove(evt)"
onmousedown="onMouseDown(evt)"
onmouseup="onMouseUp(evt)"
/>
</svg>
Si alguien va a probar este código que tengo hecho, tiene que probarlo con las extensiones .svg
Cualquier ayuda o sugerencia es bienvenida. Ya sea que alguien tenga el código de lo que estoy explicando arriba. Como también que debo añadir o quitar para que funcione este código según lo que expliqué arriba. Gracias anticipadas
. 
