динамические пути SVG только с Javascript/jQuery

Я ищу способ, который может уменьшить код ниже

вы также можете просмотреть результат здесь https://jsfiddle.net/83qpktrx/

мой вопрос: можно ли динамически написать «var pathx»? если да то как? чего я хотел добиться, так это того, что я хочу написать только 1 строку «var pathx», но атрибуты динамически различаются, поэтому я могу отображать «линейный путь» на 360 градусов, или я должен писать их один за другим 360 раз?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>svg test</title>
<style>
    svg {
        border: solid 1px #00f;
        width: 700px;
        height: 550px;
    }
</style>
</head>

<body>
    <svg id="mysvg" width="300" height="300"></svg>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    //dimension of svg
    var svgw = $("#mysvg").width();
    var svgh = $("#mysvg").height();

    //center point of svg
    var xcenter = svgw/2;
    var ycenter = svgh/2;

    var point = '<circle cx="' + xcenter + '" cy="' + ycenter + '" r="10" stroke="red" stroke-width="2" fill="orange" />';

    var path1 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" />';
    var path2 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-45 ' + xcenter + ' ' + ycenter + ')" />';
    var path3 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-90 ' + xcenter + ' ' + ycenter + ')" />';
    var path4 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-135 ' + xcenter + ' ' + ycenter + ')" />';
    var path5 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-180 ' + xcenter + ' ' + ycenter + ')" />';
    var path6 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-225 ' + xcenter + ' ' + ycenter + ')" />';
    var path7 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-270 ' + xcenter + ' ' + ycenter + ')" />';
    var path8 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-315 ' + xcenter + ' ' + ycenter + ')" />';

    $("#mysvg").html(point + path1 + path2 + path3 + path4 + path5 + path6 + path7 + path8);
</script>


javascript svg html jquery
person ha_ryu    schedule 27.10.2015    source источник
comment
360-строчный путь, как описано здесь: stackoverflow.com/questions/5737975/ (полное раскрытие: это мой ответ)   -  person Anthony    schedule 27.10.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы действительно должны использовать createElementNS и appendChild для создания SVG. Это более гибко, и вам больше не нужен jQuery (jQuery все равно плохо работает с SVG - см. этот пост: добавка jquery не работает с элементом svg?).

Обновленный JSFiddle: https://jsfiddle.net/83qpktrx/2/

person Sphinxxx    schedule 27.10.2015
comment
Спасибо, Sphinxxx, я думаю, что я хочу, чтобы код был именно таким, хотя мне все еще нужно больше времени, чтобы понять код. :) - person ha_ryu; 27.10.2015
comment
Немного повозился с ним. в основном переместили стили элементов в CSS, а также переместили круг на более высокий слой лучей, чтобы он покрывал их, а не пересекал его: jsfiddle.net/83qpktrx/5 Но молодец! - person Anthony; 27.10.2015

arrow_upward
0
arrow_downward

Почему бы не использовать JS-библиотеку, которая позволит рисовать ваш путь, добавляя точки и подготавливая путь к использованию? Я думаю, что это также облегчит поддержку этого кода в будущем.

http://paperjs.org/reference/path/#path

person Maksym Kozlenko    schedule 27.10.2015
comment
Я полагаю, что FabricJS — это еще одна js-библиотека векторной графики. - person Anthony; 27.10.2015
comment
D3.js также является вариантом, специально созданным для SVG: github.com/mbostock/d3/ вики/галерея - person Sphinxxx; 27.10.2015
comment
Привет, спасибо за предложения, но я хочу добиться этого только в Javascript/jQuery, да, я пробовал другие библиотеки, такие как D3.js, но прежде чем я начну использовать другие библиотеки, я хочу сначала освоить JS/jQuery :) - person ha_ryu; 27.10.2015