Alignement du texte en SVG

Question

J'essaie de créer des documents SVG XML contenant un mélange de lignes et de brefs extraits de texte (généralement deux ou trois mots). Le principal problème que je rencontre est l'alignement du texte sur les segments de ligne.

Pour l'alignement horizontal, je peux utiliser text-anchor con left , middle o right . Je ne trouve pas d'équivalent pour l'alignement vertical ; alignment-baseline n'a pas l'air de le faire, donc pour l'instant j'utilise dy="0.5ex" comme une solution de fortune pour l'alignement du centre.

Existe-t-il une manière correcte d'aligner avec le centre vertical ou le haut du texte ?

Answer 1

Il s'avère que vous n'avez pas besoin de chemins de texte explicites. Firefox 3 ne supporte que partiellement les balises d'alignement vertical ( voir ce fil de discussion ). Il semble également que dominant-baseline ne fonctionne que lorsqu'il est appliqué en tant que style, alors que text-anchor peut faire partie du style ou être un attribut de balise.

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

Cela fonctionne dans Firefox, malheureusement Inkscape ne semble pas gérer la dominante-baseline (ou du moins pas de la même manière).

Answer 2

Cet effet peut en effet être obtenu en fixant alignment-baseline a central o middle .

Answer 3

Vous pouvez probablement définir votre chemin et l'utiliser pour mettre en page le texte comme cela est fait dans Règles de mise en page du texte sur un chemin