?
Solved

Calculate x y positions SVG circle elements

Posted on 2013-06-24
5
Medium Priority
?
546 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 1000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

800 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