Question

I have created a vector graphic using Raphael JS – specifically a circle.

I would now like to use this circle as the letter “O” in a title. It is also a circle that will animate upon click. I would like to know if this is at all possible.

Here is a fiddle to explain better what I’m trying to say.

The html is very simple:

<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>

Here is the jsfiddle

Basically the circle will act as the second letter in “Notre”, and when clicked will move to the right of the screen. Other things will happen after, but this effect is what I’m trying to get….

Answer 1

Placing the Raphael canvas in a span is clever, but at the end of the day I suspect you’ll regret mixing native HTML with Raphael in this way. Doing so would probably require a lot of absolute positioning and z-indexes that are better handled and supported in Raphael.

I recommend you simple draw the text in Raphael:

var text = r.set();
text.push(
    r.text(10,20,"N"),
    r.text(70,20,"TRE APPROCHE :")
);
text.attr({
    'text-anchor': 'start',
    'font-size':'36px'        
});

If the SVG/VML styling is inadequate, you could also just use an image. Again, I would recommend placing that image on the canvas using Raphael (paper.image());

Note that, in the updated fiddle, I made the canvas a div the width of the logo.

Updated fiddle.