02.03.2016, 09:07
|
|
Интересующийся
|
|
Регистрация: 16.02.2016
Сообщений: 19
|
|
|
SVG: круг - квадрат - овал (бесконечно)
Привет. Написал код, чтобы при клике появлялся новый круг, квадрат, овал. Не доходят руки сделать до идеала.
Идеал: В 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>
Последний раз редактировалось Eadweard, 08.03.2016 в 16:11.
|
|
02.03.2016, 16:20
|
|
Интересующийся
|
|
Регистрация: 16.02.2016
Сообщений: 19
|
|
Легкое же :с
Мне только тяжеловато  |
|
03.03.2016, 13:54
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Eadweard,
<!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), opacity 10s linear;
-moz-transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
-o-transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
}
</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 'rgba(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ',1)';
}
$("html").on("click", ".circle", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute('fill',"rgba(255,255,255,0)");
$('rect').attr("fill", randomRGBColor());
});
$("html").on("click", ".rect", function () {
this.setAttribute("x", Math.random() * 500);
this.setAttribute("y", Math.random() * 500);
this.setAttribute('fill', "rgba(255,255,255,0)");
$('ellipse').attr("fill", randomRGBColor());
});
$("html").on("click", ".ellipse", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute('fill', "rgba(255,255,255,0)");
$("circle").attr("fill", randomRGBColor());
});
</script>
<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" fill="rgba(0,0,0,0)"/>
<ellipse class="ellipse" cx="400" cy="200" rx="50" ry="25" fill="rgba(0,0,0,0)"/>
</svg>
</body>
</html>
Последний раз редактировалось Dilettante_Pro, 09.03.2016 в 10:25.
|
|
08.03.2016, 16:10
|
|
Интересующийся
|
|
Регистрация: 16.02.2016
Сообщений: 19
|
|
Сообщение от Dilettante_Pro
|
Eadweard,
<!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), opacity 10s linear;
-moz-transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
-o-transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
transition:all 3s cubic-bezier(0, 0, 1, 1), opacity 10s linear;
}
</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 'rgba(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ',1)';
}
$("html").on("click", ".circle", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute('fill',"rgba(255,255,255,0)")
$('rect').attr("fill", randomRGBColor());
});
$("html").on("click", ".rect", function () {
this.setAttribute("x", Math.random() * 500);
this.setAttribute("y", Math.random() * 500);
this.setAttribute('fill', "rgba(255,255,255,0)")
$('ellipse').attr("fill", randomRGBColor());
});
$("html").on("click", ".ellipse", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute('fill', "rgba(255,255,255,0)")
$("circle").attr("fill", randomRGBColor());
});
</script>
<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" fill="rgba(0,0,0,0)"/>
<ellipse class="ellipse" cx="400" cy="200" rx="50" ry="25" fill="rgba(0,0,0,0)"/>
</svg>
</body>
</html>
|
Привет. Получилось хорошо, но Вы меня не совсем поняли) Мне нужно чтобы они "клонировались" и при каждом клике всё больше и больше фигур.
|
|
08.03.2016, 19:16
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
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>
Последний раз редактировалось Dilettante_Pro, 08.03.2016 в 19:36.
|
|
09.03.2016, 02:53
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
$('rect').clone().appendTo('svg');
За такую строчку в коде нужно долго и больно бить палкой по голове.
особенно на ... $("html").on("click", ...
|
|
09.03.2016, 17:52
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
Сообщение от Dilettante_Pro
|
|
Более "правильный" вариант svg-клонирования - с использованием defs и use - завтра нарисую, сейчас некогда.
|
Насчет рисования "правильного" варианта я погорячился - динамически созданный use не хочет нормально отображаться, несмотря на все танцы с бубнами. В результате нарисовал более-менее приличный вариант создания новых элементов svg без какого-либо клонирования
<!DOCTYPE HTML>
<html>
<head>
<title>Перемещение круга</title>
<style type="text/css" >
.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 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
$("html").on("click", ".circle", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute("fill", randomRGBColor());
var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("class", "rect");
r.setAttribute("x", Math.random() * 500);
r.setAttribute("y", Math.random() * 500);
r.setAttribute("width", "35");
r.setAttribute("height", "35");
r.setAttribute("fill", randomRGBColor());
$('svg').append(r);
});
$("html").on("click", ".rect", function () {
this.setAttribute("x", Math.random() * 500);
this.setAttribute("y", Math.random() * 500);
this.setAttribute("fill", randomRGBColor());
var r = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
r.setAttribute("class", "ellipse");
r.setAttribute("cx", Math.random() * 500);
r.setAttribute("cy", Math.random() * 500);
r.setAttribute("rx", "50");
r.setAttribute("ry", "25");
r.setAttribute("fill", randomRGBColor());
$('svg').append(r);
});
$("html").on("click", ".ellipse", function () {
this.setAttribute("cx", Math.random() * 500);
this.setAttribute("cy", Math.random() * 500);
this.setAttribute("fill", randomRGBColor());
var r = document.createElementNS("http://www.w3.org/2000/svg", "circle");
r.setAttribute("class", "circle");
r.setAttribute("cx", Math.random() * 500);
r.setAttribute("cy", Math.random() * 500);
r.setAttribute("r", "35");
r.setAttribute("fill", randomRGBColor());
$('svg').append(r);
});
</script>
</head>
<body>
<svg version="1.1" baseProfile="full" width ="600" height ="600" class="svgcircle">
<circle class="circle" cx="300" cy="300" r="35" fill="red"/>
</svg>
</body>
</html>
|
|
09.03.2016, 22:23
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
|
Dilettante_Pro,
может все атрибуты в один обьект и attr?
|
|
10.03.2016, 06:23
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
рони,
Ну это уже пусть ТС смотрит - я решал в принципе, поэтому все по складАм, для наглядности
Последний раз редактировалось Dilettante_Pro, 10.03.2016 в 07:45.
|
|
10.03.2016, 06:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
Dilettante_Pro,
от setAttribute рябит 
|
|
|
|
