Create SVG circles in a circular path programmatically keeping even distance from objects

Question

I want to create a JavaScript function that will dynamically generate an SVG image as the following:

The image represents a table that has many seats and a label. The code I used to generate this table is the following:

<g id="svg_23">
     <ellipse sid="0" ry="34"  rx="34"  id="svg_13" cy="73"   cx="228" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="1" ry="7.5" rx="7.5" id="svg_17" cy="26"   cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="2" ry="7.5" rx="7.5" id="svg_19" cy="37"   cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="3" ry="7.5" rx="7.5" id="svg_16" cy="72"   cx="275" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="4" ry="7.5" rx="7.5" id="svg_18" cy="106"  cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="5" ry="7.5" rx="7.5" id="svg_14" cy="120"  cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="6" ry="7.5" rx="7.5" id="svg_21" cy="107"  cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="7 "stroke="#000" ry="7.5" rx="7.5" id="svg_15" cy="73" cx="181" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" fill="#fff"/>
     <ellipse sid="8" ry="7.5" rx="7.5" id="svg_20" cy="40" cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <text xmlSpace="preserve" textAnchor="start" fontFamily="Helvetica, Arial, sans-serif" fontSize="24" id="svg_22" y="80.5" x="219.5" fillOpacity="null" strokeOpacity="null" strokeWidth="0" stroke="#000" fill="#000000">B</text>
    </g>

I want to be able to generate it in a Javascript Function that will receive Y and X coordinates for the image and also a number of seats. From 2 to 10 seats, for example.

The function would return the seats evenly disposed around the table. My initial idea was to calculate the circumference of the outer circle where the seats would be placed and divide by the number of seats. The problem here would be how to calculate each seat X and Y position.

Any ideas?

Is this useful? https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334 — Anthony, Aug 07 '18 at 22:51
I guess not @Anthony . That explains how to create a circle using a path. Not how to create circles around a circular path. But it has given me some ideas. Lets see — Guido, Aug 07 '18 at 22:59
@Guido - use trigonometry. Divide the # of degrees in a circle by the number of places. This is the number of degrees between guests. Trig will then give you the X,Y coords when you multiply by the (placement) circle's radius. — enhzflep, Aug 07 '18 at 23:05
You could also use a transform to rotate the position from an initial point. Rotate accepts degrees if I remember correctly. — Anthony, Aug 07 '18 at 23:18

3176243 · Accepted Answer · 2018-08-07T23:45:23.200

2

After calculating angles for circles (360/number_of_circles*index) you just need to offset it by angle and distance

"Here's the equations for that.

X=distance*cos(angle)

Y=distance*sin(angle)

But this is an angle and distance from the origin (0,0), usually you want the position (x,y) an angle and distance from another position (x0, y0).

X=distance*cos(angle) +x0

Y=distance*sin(angle) +y0 "

(copy paste from https://www.construct.net/pl/forum/construct-2/how-do-i-18/how-do-i-calculate-position-x-78314 - pretty basic trig math ;) )

One note though - angle is in radians, not degrees, so

var toRadians = function (degree) {
    return degree * (Math.PI / 180);
};

edited Aug 07 '18 at 23:45

answered Aug 07 '18 at 23:21

3176243

561
4
7

of course one can calculate angles directly in radians ;) i.e: ((2*Math.Pi)/number_of_circles)*index – 3176243 Aug 07 '18 at 23:58
Thank or you for that! It worked like a charm. I had make some adjustments, but everything looks fine =) @3176243 – Guido Aug 10 '18 at 13:51

Create SVG circles in a circular path programmatically keeping even distance from objects

1 Answers1