Как я могу абсолютно ориентировать текст в SVG - PullRequest
Новая
       15

Как я могу абсолютно ориентировать текст в SVG

1 голос
/ 13 мая 2011

У меня есть SVG, содержащий несколько групп элементов, одна группа изображений имеет <text> узлов, окружающих его.

Я использую jQuery для clone() и добавляю rotate(a) эту группу, чтобы появился путьнесколько раз вокруг формы.Когда я вращаю всю группу, ориентация текста меняется в зависимости от угла поворота.В качестве альтернативы я мог бы нарисовать отдельные пути, но затем, если я хочу внести изменения в форму пути, мне нужно распространить эти изменения, в том числе пересчет координат и т. Д.

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

Есть ли свойство <g> или <text>, которое я могу установить, чтобы абсолютно определить ориентацию текста слева направо?Если нет, то есть ли лучший способ получить конечный результат, который я хочу? 

//Just in case this isn't blatantly obvious, this is just a mock up.  You may correct any syntax errors you find, but they are NOT the source of any trouble.
var svg = $('#container');
var group = $(document.createElementNS(svgns,'g'));

group.attr('id','groupA');
var path = $(document.createElementNS(svgns,'path');
path.attr('d', 'M40 40 A9,2 0 0,1 100 40'); //A simple arc
group.append(path);

var text = $(document.createElementNS(svgns,'text') ;
text.attr('class','someclass');
group.append(text);

svg.append(group);
group=group.clone();
group.attr('id','groupB');
group.attr('transform','rotate(90, 100, 100)'); //rotates both path and text around the center of image.  I'd rather keep text upright, although I want it in the same relative position
svg.append(group)

1 Ответ

1 голос
/ 18 мая 2011

Во-первых, вы должны поворачивать только изображение, а не группу, содержащую текст и изображение.

Во-вторых, используя функции getBBoxInElementSpace и getBoundingBoxInArbitrarySpace из здесь , получите ограничивающую рамку повернутого изображения с помощью следующего вызова:

<pre> var imageBBox = getBBoxInElementSpace(text,image);

Затем обновите текстовую позицию следующим образом:

<pre> text.x.baseVal.getItem(0).value = imageBBox.x; text.y.baseVal.getItem(0).value = imageBBox.y;

...