Ich versuche, SVG-XML-Dokumente mit einer Mischung aus Zeilen und kurzen Textausschnitten (normalerweise zwei oder drei Wörter) zu erstellen. Das Hauptproblem, das ich habe, besteht darin, den Text an Liniensegmenten auszurichten.
Für die horizontale Ausrichtung kann ich text-anchor
mit left
, middle
oder right
. Ich kann kein Äquivalent für die vertikale Ausrichtung finden. alignment-baseline
scheint es nicht zu tun, also benutze ich es derzeit dy="0.5ex"
als Kludge für die Ausrichtung der Mitte.
Gibt es eine geeignete Methode zum Ausrichten an der vertikalen Mitte oder am oberen Rand des Textes?
text-anchor
sindstart | middle | end | inherit
. Kein "links" und "rechts" erlaubt.Antworten:
Es stellt sich heraus, dass Sie keine expliziten Textpfade benötigen. Firefox 3 unterstützt die vertikalen Ausrichtungs-Tags nur teilweise ( siehe diesen Thread ). Es scheint auch, dass die dominante Grundlinie nur funktioniert, wenn sie als Stil angewendet wird, während der Textanker Teil des Stils oder eines Tag-Attributs 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 nicht mit der Dominant-Baseline umzugehen (oder zumindest nicht auf die gleiche Weise).
quelle
dominant-baseline
. Ich benötige noch eine<text font-size="12px"><tspan dy="6px">off set by 1/2 font size</tspan></text>
.Dieser Effekt kann tatsächlich durch Einstellen
alignment-baseline
aufcentral
oder erreicht werdenmiddle
.quelle