Vertikalen Text ganz unten positionieren

[Jeena Paradies]

Hallo,

Ich habe ein SVG das so aussieht, um einen Text Vertikal schreiben und mit JavaScript danach verändern zu können:

<svg xmlns='http://www.w3.org/2000/svg'>  
 <text id='text' x='0' y='-8' font-family='Tahoma' font-size='10' transform='rotate(90)'>Mein Text</text>  
</svg>

Das <embed> ist 20px breit und 424px hoch. Jetzt möchte ich den Text aber ganz unten anzeigen lassen anstatt ganz oben. Ich kann aber für x nicht einfach 424 reinschreiben weil der Text dann ja außerhalb währe und ich kann das auch nicht wirklich fest reinschreiben weil der Text mit JavaScript im nachhinein vom Benutzer der Webseite geändert wird.

Natürlich könnte ich das aus der größe des fonts und der Länge des Textes manuell alles ausrechnen, aber irgendwie fühlt sich das falsch und unnötig umständlich an. Leider finde ich aber nicht wirklich etwas sinnvolles wie ich das bewerkstelligen soll.

Hier mal ein Screenshot wie es jetzt ist:

Und wie ich es haben will:

Jeena

[Beat]

<svg xmlns='http://www.w3.org/2000/svg'>

<text id='text' x='0' y='-8' font-family='Tahoma' font-size='10' transform='rotate(90)'>Mein Text</text>
</svg>

> Das <embed> ist 20px breit und 424px hoch. Jetzt möchte ich den Text aber ganz unten anzeigen lassen anstatt ganz oben. Ich kann aber für x nicht einfach 424 reinschreiben weil der Text dann ja außerhalb währe und ich kann das auch nicht wirklich fest reinschreiben weil der Text mit JavaScript im nachhinein vom Benutzer der Webseite geändert wird.  
> Natürlich könnte ich das aus der größe des fonts und der Länge des Textes manuell alles ausrechnen, aber irgendwie fühlt sich das falsch und unnötig umständlich an. Leider finde ich aber nicht wirklich etwas sinnvolles wie ich das bewerkstelligen soll.  
  
Wie steht es mit der Eigenschaft von text-align:end?  
Wenn die textbox ein Child von einem rect, auf welches du die transformation bereits angewendet hast, so sollte doch bei änderung des Textes denoch die rechte Seite als feste Position des Textes bezüglich rect bestehen bleiben.  
  
mfg Beat

-- 
Woran ich arbeite:  
[X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  

[ThomasM]

Hallo Jeena,

Natürlich könnte ich das aus der größe des fonts und der Länge des Textes manuell alles ausrechnen, aber irgendwie fühlt sich das falsch und unnötig umständlich an. Leider finde ich aber nicht wirklich etwas sinnvolles wie ich das bewerkstelligen soll.

Scripting wäre ein Ansatz, speziell die SVG-DOM-Methode getComputedTextLength():
var tl=document.getElementById("text").getComputedTextLength(); // 43 unter FF 3.0.5

Aus diesem Wert und der festen Höhe lässt sich der neue y-Wert für die Textposition ermitteln.

Grüße,
Thomas

[Christian Kruse]

Eine Legende ist gestorben...