Использование Raphael JS для создания текстовых узлов

Question

Я построил некоторые фигуры с помощью Рафаэля, и теперь я хотел вставить в них текст. Но, кажется, из примеров, что текстовый узел может быть прикреплен только к бумаге, а не к SVG-фигурам?

Возможно ли создать несколько фигур с различным текстом внутри?

В примере я использовал был:

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

Answer 1

В Рафаэль, все элементы рисунка (фигуры, линии, текст и т.д.) существует только как часть охватывающего бумажного объекта. Для них нет иерархической структуры. К сожалению, нет и атрибута текста для любой из этих форм. Таким образом, текстовый узел не может быть привязан к элементу формы в собственном смысле.

Однако вы можете использовать узел «Set», чтобы придать форме текстовый узел, прикрепленный к форме. Набор - это массив элементов, где преобразования (перевод, вращение и т. Д.) Могут применяться ко всем членам за одну операцию. Поэтому, если вы создали набор, содержащий один прямоугольник и один текстовый узел, вы можете обработать этот элемент набора как единый объект. Затем вы можете создать второй экземпляр этого набора и обработать его по-разному. Таким образом, хотя все текстовые элементы по-прежнему технически принадлежат бумажному объекту, они ведут себя (и появляются), как они принадлежат прямоугольнику.

Для примера:

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); 
} 

В другом подходе, я также имел разумный успех с созданием большого количества отдельных объектов бумаги на одной странице. Но это, вероятно, не то, куда вы хотите пойти.