Ausrichten von Text in SVG

Question

Ich versuche, SVG-XML-Dokumente mit einer Mischung aus Zeilen und kurzen Textausschnitten (typischerweise zwei oder drei Wörter) zu erstellen. Das Hauptproblem, das ich habe, ist, den Text mit Liniensegmenten auszurichten.

Für die horizontale Ausrichtung kann ich mit left, middle oder right verwenden. Ich kann kein Äquivalent für die vertikale Ausrichtung finden; alignment-baseline scheint es nicht zu tun, so verwende ich derzeit dy="0.5ex" als Kludge für die Center-Ausrichtung.

Gibt es eine korrekte Methode zum Ausrichten mit der vertikalen Mitte oder oben im Text?

Answer 1

Es stellt sich heraus, dass Sie keine expliziten Textpfade benötigen. Firefox 3 unterstützt nur teilweise die vertikalen Ausrichtungstags (see this thread). Es scheint auch, dass dominante Grundlinie nur funktioniert, wenn sie als Stil angewendet wird, während Textanker Teil des Stils oder ein Tag-Attribut sein kann.

<path d="M10, 20 L17, 20" 
     style="fill:none; color:black; stroke:black; stroke-width:1.00"/> 
<text fill="black" font-family="sans-serif" font-size="16" 
     x="27" y="20" style="dominant-baseline: central;"> 
    Vertical 
</text> 

<path d="M60, 40 L60, 47" 
     style="fill:none; color:red; stroke:red; stroke-width:1.00"/> 
<text fill="red" font-family="sans-serif" font-size="16" 
     x="60" y="70" style="text-anchor: middle;"> 
    Horizontal 
</text> 

<path d="M60, 90 L60, 97" 
     style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/> 
<text fill="blue" font-family="sans-serif" font-size="16" 
     x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"> 
    Bit of Both 
</text> 

Dies funktioniert in Firefox. Leider scheint Inkscape die dominante Grundlinie nicht zu handhaben (oder zumindest nicht auf die gleiche Weise).

Answer 2

Dieser Effekt kann tatsächlich erreicht werden, indem alignment-baseline auf central oder middle gesetzt wird.