Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   SVG: круг - квадрат - овал (бесконечно) (https://javascript.ru/forum/dom-window/61678-svg-krug-kvadrat-oval-beskonechno.html)

Eadweard 02.03.2016 09:07
SVG: круг - квадрат - овал (бесконечно)
 
Привет. Написал код, чтобы при клике появлялся новый круг, квадрат, овал. Не доходят руки сделать до идеала.
Идеал: В HTML виден только круг, при клике на круг он движется и появляется квадрат в другом месте, при клике на квадрат он движется и появляется овал, на овал - круг (так бесконечно). Чтобы клонировались, с каждым разом их было больше и больше. HELP :D
Что у меня: Находятся все 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 02.03.2016 16:20
Легкое же :с
Мне только тяжеловато:cray:

Dilettante_Pro 03.03.2016 13:54
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>

Eadweard 08.03.2016 16:10
Цитата:
Сообщение от Dilettante_Pro (Сообщение 409808)
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 08.03.2016 19:16
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>

MallSerg 09.03.2016 02:53
$('rect').clone().appendTo('svg');
За такую строчку в коде нужно долго и больно бить палкой по голове.
особенно на ... $("html").on("click", ...

Dilettante_Pro 09.03.2016 17:52
Цитата:
Сообщение от 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
Dilettante_Pro,
может все атрибуты в один обьект и attr?

Dilettante_Pro 10.03.2016 06:23
рони,
Ну это уже пусть ТС смотрит - я решал в принципе, поэтому все по складАм, для наглядности

рони 10.03.2016 06:48
Dilettante_Pro,
от setAttribute рябит :)


Часовой пояс GMT +3, время: 12:34.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице