I built some shapes using Raphael, and now I wanted to put some text into them. But, it seems, from the examples, that a text node can only be attached to the paper and not svg shapes?

Is it possible to create multiple shapes with different text inside?

The example I was using was:

paper.text(50, 50, "Raphaël\nkicks\nbutt!");

I built some shapes using Raphael, and now I wanted to put some text into them. But, it seems, from the examples, that a text node can only be attached to the paper and not svg shapes?

Is it possible to create multiple shapes with different text inside?

The example I was using was:

paper.text(50, 50, "Raphaël\nkicks\nbutt!");

• javascript
• svg
• raphael

• also asked here, but without answers yet :( groups.google./group/raphaeljs/browse_thread/thread/… – räph Commented Sep 22, 2009 at 5:33
• Related: stackoverflow./questions/3679436/… – arboc7 Commented Mar 28, 2012 at 9:08

1 Answer 1

In Raphael, all drawing elements (shapes, lines, text, etc) only exist as part of enpassing paper object. There is no hierarchal structure to them per se. Nor is there a text attribute for any of these shapes unfortunately. So a text node cannot be 'attached' to a shape element in the proper sense.

However you can use a 'Set' node to give the appearance of a text node being attached to a shape. A Set is an array of elements where transformations (translation, rotation, etc) can be applied to all members in a single operation. So if you made a set containing one rectangle and one text node, you can them treat that set element as a single entity. You can then create a second instance of that set and treat it differently. So while all text elements still technically belong to the paper object, they behave (and appear) like they belong to the rectangle.

For Example:

var paper = Raphael(0, 0, 400, 400);
for (var i = 0; i < 10; i++)
{
    var group = paper.set();
    group.push(paper.rect(10, 10, 50, 20));
    group.push(paper.text(35, 18, "Hello"));

    group.translate(Math.random() * 350, Math.random() * 380);
    group.rotate(Math.random() * 90);
}

As a different approach, I've also had reasonable success with creating large quantities of separate paper objects on a page. But that's probably not where you want to go.