How can I vertically orient my text using SVG.js?

Question

I have a vertical rectangle and I want to place a text inside it.

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);

I tried to use .rotate(90) but it didn't work. Can anyone help me?

Answer 1

Set the text-orientation style to upright and the writing-mode style to vertical-lr to get vertical text.

In version 3 of svg.js the .style method becomes .css instead

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>