#jquery #text #svg #orientation
#jquery #текст #svg #ориентация
Вопрос:
У меня есть SVG, содержащий несколько групп элементов, одна группировка изображений имеет <text> окружающие ее узлы.
Я использую jQuery для clone() добавления rotate(a) этой группы, чтобы путь появлялся несколько раз вокруг фигуры. Когда я поворачиваю всю группу, ориентация текста меняется с углом поворота. Я мог бы в качестве альтернативы нарисовать отдельные пути, но затем, если я хочу внести изменения в форму пути, мне нужно распространить эти изменения, включая пересчет координат и т.д.
Вместо этого я хочу, чтобы текст находился в том же относительном положении на повернутом изображении, но ориентирован вертикально.
Есть ли свойство <g> or <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. Мне трудно это визуализировать. Не могли бы вы дать ссылку на сокращенный пример?
2. Не могу связать, но я кое-что смоделирую в вопросе
3. Спасибо за код. К сожалению, мне все еще не ясно, как будет выглядеть цель. В частности, что вы подразумеваете под «текстом, который должен находиться в том же относительном положении на повернутом изображении, но ориентирован вертикально». Может быть, вы могли бы просто нарисовать его и опубликовать на сайте для обмена фотографиями?
4. Текст поворачивается вместе с изображением. Я хочу, чтобы текст не был повернут. Я хочу, чтобы он был в том же месте.
5. Почему бы просто не не поворачивать изображение, в отличие от поворота группы, содержащей как изображение, так и текст?
Ответ №1:
Во-первых, вы должны поворачивать только изображение, а не группу, содержащую текст и изображение.
Во-вторых, используя функции getBBoxInElementSpace и getBoundingBoxInArbitrarySpace из здесь, получите ограничивающую рамку повернутого изображения, используя следующий вызов:
var imageBBox = getBBoxInElementSpace(text,image);
Затем обновите положение текста следующим образом:
text.x.baseVal.getItem(0).value = imageBBox.x;
text.y.baseVal.getItem(0).value = imageBBox.y;