Привет. Написал код, чтобы при клике появлялся новый круг, квадрат, овал. Не доходят руки сделать до идеала.
Идеал: В HTML виден только круг, при клике на круг он движется и появляется квадрат в другом месте, при клике на квадрат он движется и появляется овал, на овал - круг (так бесконечно). Чтобы клонировались, с каждым разом их было больше и больше. HELP
Что у меня: Находятся все 3 фигуры, все двигаются и при клике появляются новые.
<!DOCTYPE HTML>
<html>
<head>
<title>Перемещение круга</title>
<style>
.svgcircle
{
position: absolute;
}
.circle
{
-webkit-transition: all 10s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 10s cubic-bezier(0, 0, 1, 1);
-o-transition:all 10s cubic-bezier(0, 0, 1, 1);
transition:all 10s cubic-bezier(0, 0, 1, 1);
}
.rect
{
-webkit-transition: all 10s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 10s cubic-bezier(0, 0, 1, 1);
-o-transition:all 10s cubic-bezier(0, 0, 1, 1);
transition:all 10s cubic-bezier(0, 0, 1, 1);
}
.ellipse
{
-webkit-transition: all 10s cubic-bezier(0, 0, 1, 1);
-moz-transition:all 10s cubic-bezier(0, 0, 1, 1);
-o-transition:all 10s cubic-bezier(0, 0, 1, 1);
transition:all 10s cubic-bezier(0, 0, 1, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
$("html").on("click", ".circle" , function()
{
this.setAttribute("cx",Math.random()*500);
this.setAttribute("cy",Math.random()*500);
$(this).clone().appendTo(".svgcircle").
attr("fill",randomRGBColor());
})
$("html").on("click", ".rect" , function()
{
this.setAttribute("x",Math.random()*500);
this.setAttribute("y",Math.random()*500);
$(this).clone().appendTo(".svgcircle").
attr("fill",randomRGBColor());
})
$("html").on("click", ".ellipse" , function()
{
this.setAttribute("cx",Math.random()*500);
this.setAttribute("cy",Math.random()*500);
$(this).clone().appendTo(".svgcircle").
attr("fill",randomRGBColor());
})
</script>
<svg width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="35" cy="25" r="35" fill="red"/></circle>
<rect class="rect" x="50" y="50" width="35" height="35" fill="green" /></rect>
<ellipse class="ellipse" cx="25" cy="25" rx="50" ry="25"/>
</svg>
</body>
</html>