Wyrównywanie tekstu w SVG

Staram się tworzyć dokumenty SVG XML z mieszanką linii i krótkich fragmentów tekstu (zazwyczaj dwa lub trzy słowa). Głównym problemem jest wyrównanie tekstu do segmentów linii.

Do wyrównania poziomego mogę użyć text-anchor z left, middle lub right. Nie mogę znaleźć odpowiednika dla wyrównania w pionie; alignment-baseline nie wydaje się tego robić, więc obecnie używam dy="0.5ex" jako kludge Dla wyrównania w środku.

Czy istnieje odpowiedni sposób wyrównania z pionem środek czy góra tekstu?

 69
xmlsvg
Author: Peter Mortensen, 2008-09-11
Source

2 answers

Okazuje się, że nie potrzebujesz jawnych ścieżek tekstowych. Firefox 3 ma tylko częściową obsługę znaczników wyrównania pionowego (zobacz ten wątek ). Wydaje się również, że dominująca linia bazowa działa tylko wtedy, gdy jest stosowana jako styl, podczas gdy zakotwiczenie tekstu może być częścią stylu lub atrybutem znacznika.

<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>
To działa w Firefoksie. Niestety Inkscape nie radzi sobie z dominującą linią bazową (a przynajmniej nie w ten sam sposób).
 58
Author: Ian G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-12 15:08:13

Ten efekt można rzeczywiście osiągnąć przez ustawienie alignment-baseline Na central lub middle.

 2
Author: mjswensen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-15 14:27:50