alinhamento vertical do elemento de texto no SVG

Vamos dizer que eu tenho o arquivo SVG:

 b a  

Eu quero de alguma forma alinhar o topo de a e b . Na verdade, quero que o meu posicionamento esteja de acordo com a roofline do roofline vez da baseline de baseline !

A propriedade de alignment-baseline é o que você está procurando. Ela pode receber os seguintes valores

 auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit 

Descrição do w3c

Esta propriedade especifica como um object é alinhado em relação a seu pai. Essa propriedade especifica qual linha de base desse elemento deve ser alinhada com a linha de base correspondente do pai. Por exemplo, isso permite que linhas de base alfabéticas em texto romano permaneçam alinhadas nas alterações de tamanho de fonte. O padrão é a linha de base com o mesmo nome do valor computado da propriedade de linha de base de alinhamento. Ou seja, a posição do ponto de alinhamento “ideográfico” na direção da progressão do bloco é a posição da linha de base “ideográfica” na tabela de linha de base do object que está sendo alinhado.

Fonte W3C

Infelizmente, embora esta seja a maneira “correta” de alcançar o que você está procurando, o Firefox não implementou muitos atributos de apresentação para o SVG Text Module ( Documentação do ‘SVG in Firefox’ MDN ).

De acordo com a especificação SVG, alignment-baseline se aplica somente a , , e . Meu entendimento é que ele é usado para compensar aqueles do object acima deles. Acho que o que você está procurando é dominant-baseline .

Valores possíveis de dominant-baseline são:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Verifique a recomendação do W3C para a propriedade da linha de base dominante para obter mais informações sobre cada valor possível.

attr (“dominante-linha de base”, “central”)

Se você está testando isso no IE, a linha de base dominante e a linha de base de alinhamento não são suportadas.

A maneira mais eficaz de centralizar o texto no IE é usar algo assim com “dy”:

  Ya Text  

O valor negativo mudará para cima e um valor positivo de dy mudará para baixo. Eu descobri que usar -.4em parece um pouco mais centralizado verticalmente para mim do que -.5em, mas você será o juiz disso.

Depois de examinar a Recomendação do SVG, entendi que as propriedades da linha de base servem para posicionar o texto em relação a outro texto, especialmente ao misturar fonts e / ou idiomas diferentes. Se você quiser posicionar o texto de modo que seja o topo é y então você precisa usar dy = "y + the height of your text" .

Intereting Posts