Выравнивание текста в SVG

Я пытаюсь сделать SVG XML-документы со смесью строк и коротких фрагментов текста (обычно два или три слова). Основная проблема, с которой я сталкиваюсь, - это выравнивание текста с сегментами линии.



для горизонтального выравнивания я могу использовать text-anchor с left,middle или right. Я не могу найти эквивалент для вертикального выравнивания; alignment-baseline не похоже, чтобы сделать это, поэтому в настоящее время я использую dy="0.5ex" как kludge для выравнивания центра.



есть ли правильный способ для выравнивания с вертикальным центром или верхней частью текста?

726   2  

2 ответов:

оказывается, что вам не нужны явные текстовые пути. Firefox 3 имеет только частичную поддержку тегов вертикального выравнивания (смотрите здесь). Также кажется, что dominant-baseline работает только при применении в качестве стиля, тогда как text-anchor может быть частью стиля или атрибута тега.

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

это работает в Firefox. К сожалению, Inkscape, похоже, не обрабатывает доминирующую базовую линию (или, по крайней мере, не так же).

58  
2015-10-12 18:08:13

этот эффект действительно может быть достигнуто путем установки alignment-baseline до central или middle.

2  
2014-05-15 17:27:50

Comments

    Ничего не найдено.
Click here to cancel reply.