1

I have searched around Stackoverflow for the same question, but all questions that looks a little bit like my question are programmed in Xcode (iPhone). I'm using Javascript, but I can't figure it out how I solve this.

I created a star (based on RaphaelJS). That star has a variable star points, so it could be a star with 8 points, but also 9 or 10 or 11.. My question is, I want text in a circle around that star. If the star has 8 points, then has every point it own word (so 8 words).

I have my problem illustrated in Illustrator, so maybe that my question clarified:

Image

On this moment I'm doing it with images, but that isn't flexible (in the future I would generate the star and the words by using a database). I have searched a lot. I found that any technic where this is possible, is SVG. But after many hours of trial and error, I haven't something that is similar as my image.

Adam Zalcman
  • 26,643
  • 4
  • 71
  • 92
Leander
  • 330
  • 3
  • 11
  • http://stackoverflow.com/questions/6061880/html5-canvas-circle-text may contain some hints... – Sergey Kudriavtsev Jan 14 '12 at 10:57
  • @SergeyKudriavtsev Yes, but I can't use Canvas (HTML5), because Internet Explorer 7 and 8 don't support that. – Leander Jan 14 '12 at 11:03
  • For IE you can you excanvas.js library which brings canvas support to it. – dfsq Jan 14 '12 at 12:21
  • I know excanvas.js, but it doesn't work for me. So I created the whole application with RaphaelJS (framework based on SVG) and now the application works on every browser. – Leander Jan 14 '12 at 17:35

2 Answers2

1

You can easily create this shape in SVG. Use polygon to create the star and text and textPath to create the text surrounding the star.

See this website for SVG examples. In particular you'll want to have a look at:

I also recommend to have a look at the relevant sections of SVG specification.

Adam Zalcman
  • 26,643
  • 4
  • 71
  • 92
  • Thx, but I created the star with RaphaelJS already (based on SVG). So the only thing to solve this is using SVG? But could I positioning the words with SVG? Creating a long string with whitespaces isn't flexible, I think. And how should this technic work when the star has 12 points (so 12 words?). – Leander Jan 14 '12 at 17:31
  • You can draw the text and star on a canvas, too, but it may take more effort. The question was about the most flexible way of doing it since in the future the text and shape info would come from a db. SVG is the most flexible solution that allows for easy replacement of text and coordinates with practically no extra effort. – Adam Zalcman Jan 14 '12 at 19:15
0

Ok admittedly I forgot where the points were in the image as this was the last thing I added (d'oh), but this is what I knocked up using pure css, basically the idea is that you have all the text absolutely positioned in the centre of a div to start and then individually move them out from there. I think it would be quite simple to expand this idea with some js and cunning math.

T I
  • 9,785
  • 4
  • 29
  • 51