Hi,
I am trying to do something that should be very simple, but I can't really figure it out.
What I need is to be able to print some text rotated by 90 degrees and aligned to the bottom. I also need to be able to set the font size.

What I use now is this:

    <svg:svg width="25mm" height="30mm" style="border:0.5mm solid red"> 
      <svg:text x="0" y="0" transform="rotate(-90)" fill="black" style="font-size: 8pt"><svg:tspan>30004116</svg:tspan></svg:text>
    </svg:svg>

The font-size is ignored and the text is sized to fill the 25 x 30 mm box. It seems that if I omit the transform, then the text-size style is honored.
If I size the box to width="2mm" the text is smaller, but it is vertically aligned to the middle. I need it to align to the bottom.

I have tried to play with baselines but I got nowhere (anything I tried simply caused no changes in the output) and I am even unsure that they are meant to do what I need.
Something like this, where the 'xxx' text is rotated 90 degrees.

+-----+
|     |
|     |
|     |
|  x  |
|  x  |
|  x  |
|  x  |
+-----+

Edit:
I am not married to SVG, so any alternative solution that allows me to do this is welcome.

Thanks

I'm doing the same thing and had some trouble. It probably has to do with your declaration in the svg tag. Here's what I'm doing and it is working:

<svg width="18px" height="115px" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<text transform="rotate(90)" style="text-anchor:end;" x="115" y="-4" fill="black" font-size="17" font-weight="bold" font-family="Arial">Cals From Fat</text>
</svg>

I'm using this to put in column headings in a table rotated 90 degrees. Let me know how that works out for you.

Hi arlenb, thank you for the suggestion. I have been diverted to other project so I didn't try it until now.
Unfortunately there are still the same problems I encountered:
1) The font-size is not honored (If you resize the width/height of the <svg> element, the text grows to fill he box).
2) The text remains middle aligned vertically if you increase the <svg> height.

Here's what I tried:

<svg width="18px" height="155px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid red">
   <text transform="rotate(90)" style="text-anchor:end;" x="115" y="-4" fill="black" font-size="17" font-weight="bold" font-family="Arial">Cals From Fat</text>
</svg>
<svg width="38px" height="155px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid red">
   <text transform="rotate(90)" style="text-anchor:end;" x="115" y="-4" fill="black" font-size="17" font-weight="bold" font-family="Arial">Cals From Fat</text>
</svg>

And here is what I get:


But what I want is this:

(Big box, small text, aligned to bottom)

1. 05.10.2.png‎ 2.6 kB
2. 05.10.png‎ 6.4 kB

Well, I seem to have found what I was looking for:

<svg viewBox='-24 -160 24 160' style='width: 24px; height: 160px; border:1px solid red' xmlns='http://www.w3.org/2000/svg'>
      <text transform='rotate(-90)' style='font-size:15px;'>
        text
      </text>
    </svg>

Seems to do the trick:
What I was missing was the viewBox definition (I still do not understand why it needs to be "-24 -160 24 160" rather than "0 0 24 160").