Блог

Главная - Вопросы по программированию - Как я могу ориентировать текст по вертикали, используя SVG.js ?

Как я могу ориентировать текст по вертикали, используя SVG.js ?

#svg #svg.js

#svg #svg.js

Вопрос:

У меня есть вертикальный прямоугольник, и я хочу поместить в него текст.

 let draw = SVG('drawing').size('100%', '100%');
let rect;
let text;

rect = draw.rect(50, '100%').attr({
  fill: color,
  stroke: '#d9d9d9',
  'stroke-width': 1,
});
rect.move(50, 0);

text = draw.text('Some important text').font({ fill: '#ffffff' });
text.move(50, 0);

Я пытался использовать .rotate(90) , но это не сработало. Кто-нибудь может мне помочь?

Ответ №1:

Установите стиль ориентации текста на вертикальный, а стиль режима записи на вертикальный-lr, чтобы получить вертикальный текст.

В версии 3 svg.js вместо этого метод .style становится .css

 let draw = SVG('drawing').size('100%', '100%');
let rect;
let text;

rect = draw.rect(50, '100%').attr({
  fill: 'red',
  stroke: '#d9d9d9',
  'stroke-width': 1,
});
rect.move(50, 0);

text = draw.text('Some important text').font({ fill: '#ffffff' });
text.move(70, 0);
text.style({'text-orientation': 'upright', 'writing-mode': 'vertical-lr'}) 
 html, body, div {
  width: 100%;
  height: 100%;
} 
 <script src="   https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>
<div id="drawing"></div>

Комментарии:

1. Это потрясающе, Роберт! Большое спасибо.

2. В моем случае мне нужно только 'writing-mode': 'vertical-lr' . Я полагаю, что это может быть альтернативой тому, чтобы мое право начиналось снизу и поднималось вверх, а не вверх и вниз по вертикали справа? Я погуглю это. Спасибо, чувак.