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