Text in SVG ausrichten

70

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-anchormit left, middleoder right. Ich kann kein Äquivalent für die vertikale Ausrichtung finden. alignment-baselinescheint 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?

Ian G.
quelle
17
Ich denke, es gibt einen Fehler in Ihren horizontalen Annahmen. Nach w3.org/TR/SVG/text.html#TextAnchorProperty die zulässigen Werte für text-anchorsind start | middle | end | inherit. Kein "links" und "rechts" erlaubt.
Juve

Antworten:

61

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

Ian G.
quelle
1
Leider ist Firefox ab November 2011 immer noch der einzige Browser, der dies unterstützt dominant-baseline. Ich benötige noch eine <text font-size="12px"><tspan dy="6px">off set by 1/2 font size</tspan></text>.
Travis
Ich würde sagen, dass zumindest Chrome dies ebenfalls unterstützt.
jjmontes
Safari scheint es jetzt zu unterstützen.
Nathan Villaescusa
2

Dieser Effekt kann tatsächlich durch Einstellen alignment-baselineauf centraloder erreicht werden middle.

mjswensen
quelle