Рафаэль Дж. С. и позиционирование текста?

Question

Я пытаюсь расположить текст внутри холста SVG, предоставив x, y координаты

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

, но не позиционирует текст, как все другие объекты ...

x, y координаты указывают центр объекта! Не "слева и сверху" пикселей!

---

Я хотел бы "выравнивание по левому краю" текст вдоль линии, аналогично стандартному HTML.

Помощь будет очень признательна.

Answer 1

Свойство Text-anchor для текстового метода по умолчанию установлено в 'middle'.

Если вы хотите выровнять его по левому краю, измените привязку текста в атрибутах объекта:

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});

Answer 2

Я знаю, вы не сказали, что вам нужно выровнять его по вертикали, но если вы хотите использовать paper.text вместо paper.print ... и хотели бы выровнять по вертикали, чтобы быть верхним.

Попробуйте это:

function alignTop(t) {
    var b = t.getBBox();
    var h = Math.abs(b.y2) - Math.abs(b.y) + 1;

    t.attr({
        'y': b.y + h
    });
}

И просто передайте ему текстовый объект Рафаэля. Это выровняет это для Вас. и просто вызвать эту функцию

Answer 3

Решено!

Используя следующее

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

теперь выравнивает текст по левому краю.

Answer 4

Следующий код хорошо работает в IE, Chrome (Firefox не тестировался):

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"),
    b = t._getBBox();
t.translate(-b.width/2,-b.height/2);

Пояснение:

в Рафаэле, текст центрируется вокруг заданного вами x & y по умолчанию, вы можете установить выравнивание по левому краю:

t.attr({'text-anchor':'start'})

но у вас нет атрибута для его выравнивания по верху. Я сначала попробовал:

var b=t.getBBox(); 

но он вернул NaN в IE, поэтому я обратился к:

var b=t._getBBox();

_getBBox () недокументирован, но используется внутри самого Рафаэля и работает!

Надеюсь, это поможет.