Вопрос по jquery, jquery-svg, svg – Как разместить текст в центре пути SVG

6

Для рендеринга SVG я использую плагин jQuery SVG. И теперь я хочу добавить текст к каждому пути и полигону. НаjsFiddle Вы можете увидеть сгенерированную разметку с помощью плагина.

Для создания текста я написал следующий код:

var svgg = $("#rsr").svg('get');
var texts = svgg.createText();
svgg.textpath($("#Layer_x0020_1"),id, texts.string('We go ').
   span('up', { dy: -30, fill: 'red' }).span(',', { dy: 30 }).
   string(' then we go down, then up again'));

В коде наjsFiddle Вы можете видеть, чтоtextpath тег существует, но он не виден. Как добавить текст в центр каждого пути?
Благодарю.

Я хочу текст в середине фигуры. user1260827
Хорошо, тогда, пожалуйста, обновите / уточните свой вопрос выше. Erik Dahlström
Что вы имеете в виду под "центром каждого пути"? Вы имеете в виду, что вы хотите, чтобы текст находился в середине фигуры, или вы хотите, чтобы текст был центрирован на самом пути, но все еще следовал пути (центрированный около 50% от общей длины пути)? Erik Dahlström

Ваш Ответ

2   ответа
1

Здесь есть пара вопросов.

а) SVG чувствителен к регистру, поэтому это textPath, а не textpath.

б) textPath должен быть заключен в<text> элемент должен быть действительным

Вот твойjsFiddle исправлен.

Ах да Только что попробовал - он работает на Firefox, но совсем не рендерится на Chrome.
Скрипка не работает :-(
xlink не является обязательным. startOffset = & Quot; 50 & Quot; Текст-якорь = & Quot; средний & Quot; будет центрировать это. Я обновил jsFiddle атрибутами startOffset и text-anchor.
textpath тоже отлично работает. Но Jquery SVG не добавить<text> элемент иxlink, Также я хочу разместить текст в центре. user1260827
@foobarbecue Создайте ошибку на багтрекере Chrome:code.google.com/p/chromium/issues/list
12

Чтобы разместить текст в виде прямой линии поверх фигуры, в середине ограничительной рамки см .:

http://jsfiddle.net/dYuAA/114/

Он просто добавляет немного JavaScript для размещения текста.

function addText(p)
{
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var b = p.getBBox();
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")");
    t.textContent = "a";
    t.setAttribute("fill", "red");
    t.setAttribute("font-size", "14");
    p.parentNode.insertBefore(t, p.nextSibling);
}

var paths = document.querySelectorAll("path");
for (var p in paths)
{
    addText(paths[p])
}

Вышесказанное рассматривает только элементы пути, но вы можете настроить селектор, чтобы включить все, что вам нужно.

Любой способ избежать этого: & quot; Uncaught TypeError: p.getBBox не является функцией & quot; используя Chrome, «SCRIPT438: SCRIPT438: объект не поддерживает свойство или метод» getBBox ». в Microsoft-Edge и «TypeError: p.getBBox не является функцией» при использовании Firefox?
@ user1767316 Не происходит ни в одном из этих браузеров на моем компьютере, вы пробовали запускать с отключенными всеми расширениями браузера?
Похоже, пример jsfiddle больше не работает.
Должен работать сейчас.
Огромное спасибо!

Похожие вопросы