Solved

Calculate x y positions SVG circle elements

Posted on 2013-06-24
5
522 Views
Last Modified: 2013-07-17
Hi

Im trying to create the attached diagram using SVG

For the outer circle (made of 27 circles), does anyone know an algorithm that could calculate the x and Y positions of each circle . Each circle has a radius of 70

Thanks
map.png
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 5

Expert Comment

by:truinx
ID: 39271749
Your question is interesting. I would like to know also.

By the way, the algorithm will also depend on the length of the string the circle is attached to. Do you have any specific length of the string? Or the string is irrelevant as long as the circles are adjacent to one another?
0
 

Author Comment

by:coolispaul
ID: 39271801
What do you mean by the length of the string?

yeah the circles should just be adjacent to one another to form 1 big circle. ( similar to attached graphic)
My circles have a radius of 70 pixels

Thanks
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39274247
There is option to calculate the position :

var pos = $("#myimage").position(); // returns an object with the attribute top and left
pos.top;  // top offset position
pos.left; // left offset position

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39277359
Does that not just calculate positions?

If i have 27 circles of 70 pixels radius how can i find out the x and y posittins for each circle to form one big circle (like graphic attached)?

Cheers
0
 
LVL 5

Expert Comment

by:truinx
ID: 39284077
I am stupid in giving exact answer for math questions.

But you need to to have a starting point.
The circumference of the big circle that is formed by small ones:
BC(circumference) = sum(of all SC[diameter])

d = 0radian
element=0
maxelement =27
Loop until element > maxElement
SC(element).position = touching the d radian(BC)
Element = element +1
d = d + radian of SC
Loop

Just an idea.
0

Featured Post

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question