dynamic SVG paths with only Javascript/jQuery

Question

I am looking for a way which can lessen the code below

you can also view the result here https://jsfiddle.net/83qpktrx/

my question is, is it possible to write the "var pathx" dynamically? if so how? what I wanted to achieve is I only want to write 1 line of "var pathx" but attributes are dynamically different so I can render the "line path" 360 degrees, or should I write them one by one 360 times?

<!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>

360 line path like described here: http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334 ( full disclosure: its my answer ) — Anthony, Oct 27 '15 at 03:00

score 0 · Answer 1 · answered Oct 27 '15 at 02:18

0

Why not to use JS library which will allow to draw your path by adding points and getting ready to use path? I think it's also making it easier to maintain that code in future

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

answered Oct 27 '15 at 02:18

Maksym Kozlenko

10,273
2
66
55

FabricJS is another vector graphic js library, I believe. – Anthony Oct 27 '15 at 02:57
D3.js is also an option, tailor-made for SVG: https://github.com/mbostock/d3/wiki/Gallery – Sphinxxx Oct 27 '15 at 03:05
Hi, thank you for suggestions, but I only want to achieve this only in Javascript/jQuery, yes I tried other libraries like D3.js, but before I go use other libraries I want to master JS/jQuery first :) – ha_ryu Oct 27 '15 at 03:45

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

You really should use createElementNS and appendChild to build your SVG. It's more flexible that way, and you don't need jQuery anymore (jQuery doesn't play well with SVG anyway - see this post: jquery's append not working with svg element?).

Updated JSFiddle: https://jsfiddle.net/83qpktrx/2/

edited May 23 '17 at 12:03

Community

1
1

answered Oct 27 '15 at 02:47

Sphinxxx

12,484
4
54
84

Thank you Sphinxxx, I think this is the way I want the code to be, I still need more time to understand the code though. :) – ha_ryu Oct 27 '15 at 03:43
2

Tinkered with it a bit. mostly moved element styles to CSS and also moved the circle to higher layer of rays so that it covers them instead of them crossing over it: https://jsfiddle.net/83qpktrx/5/ But well done! – Anthony Oct 27 '15 at 05:06

dynamic SVG paths with only Javascript/jQuery

2 Answers2