alinhamento vertical do elemento de texto em SVG

142

Digamos que eu tenho o arquivo SVG:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

Eu quero de alguma forma alinhar o topo de ae b. Na verdade, eu quero que meu posicionamento seja de acordo com o rooflineinvés de baseline!

svg vertical-alignment w3c

— SeMeKh
fonte

A única resposta que funciona no IE: stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

116

A alignment-baselinepropriedade é o que você está procurando e pode assumir 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 objeto é alinhado em relação ao pai. Esta propriedade especifica qual linha de base deste elemento deve ser alinhada com a linha de base correspondente do pai. Por exemplo, isso permite que as linhas de base alfabéticas no texto romano permaneçam alinhadas pelas alterações no tamanho da fonte. O padrão é a linha de base com o mesmo nome que o valor calculado da propriedade alinhamento-linha de base. 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 objeto que está sendo alinhado.

Fonte W3C

Infelizmente, embora essa seja a maneira "correta" de alcançar o que você deseja, parece que o Firefox não implementou muitos atributos de apresentação para o SVG Text Module ( documentação MDN 'SVG no Firefox' )

— Simon West
fonte

Não teve sorte com isso. Você poderia dar um exemplo?

— SeMeKh

2

Na minha opinião, a melhor resposta, pois ela respondeu à minha sem ter que navegar para uma página de parede de texto. Eu queria exibir meu texto em y = 0, mas estava fora da tela, então usei a regra CSS "alignment- baseline: hanging ", e fez exatamente o que eu estava procurando, texto no ponto mais alto do contêiner SVG, sem que um único pixel estivesse fora da tela.

— R. Hill

1

@SeMeKh: Hmm, aliás, funcionou para mim no Chromium, mas agora acabei de verificar que o mesmo não funciona no Firefox. Portanto, parece que essa propriedade não é suportada consistentemente nos navegadores a partir de agora.

— R. Hill

2

@ R.Hill Aqui está o relatório de erros do firefox, aberto há mais de 11 anos bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: Qual é a diferença entre 'middle' e 'central'?

— Mxmlnkn 31/10/16

9

Promovido por engano, e porque eu cometi o mesmo erro antes, não posso desfazê-lo. ☹ alignment-baseline: centralfaz não trabalho para SVGs no Firefox, e que parece ser por design. dominant-baseline: centralfunciona em todos os navegadores que eu tentei até agora, como indicado nesta resposta: stackoverflow.com/a/15997503/1450294

— Michael Scheper

227

De acordo com SVG spec, alignment-baselinesó se aplica a <tspan>, <textPath>, <tref>e <altGlyph>. Meu entendimento é que ele é usado para compensar aqueles do <text>objeto acima deles. Eu acho que o que você está procurando é dominant-baseline.

Os possíveis valores de dominant-baselinesã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 de linha de base dominante para obter mais informações sobre cada valor possível.

— toutankh
fonte

8

Isso corrigiu meus problemas com o Firefox (que não estava funcionando com a propriedade "alignment-baseline"). A "linha de base dominante" funciona no Chrome e Firefox. Obrigado!

— Mariano Desanze 19/09/2014

5

Exceto que isso não funciona em nenhuma versão do IE neste momento, então não é realmente tão útil para muitos aplicativos do mundo real, infelizmente.

— usar o seguinte

3

Como o IE não oferece suporte à linha de base dominante ou à linha de base de alinhamento, você pode verificar o suporte para o recurso assim element.hasAttribute('dominant-baseline')e, se ele retornar falso, aplique dy=-0.4emconforme descrito nesta resposta stackoverflow.com/a/29089222/2296470

— Tigran

1

linha de base dominante: central funcionou no meu caso. obrigado!

— Liam Mitchell

1

estar ciente de que dominante da linha de base não é suportado pelo IE10-12 e Edge16

— japrescott

47

attr ("linha de base dominante", "central")

— user1087079
fonte

1

Isso é alinhado pelo centro do caractere (tanto quanto os glifos da fonte funcionam bem), não tendo certeza de como essa é uma resposta aqui para esta pergunta.

— matanster

3

Este é o método d3 ou jquery de atribuir atributos

— glifo

1

Esta solução coloca a linha de base no centro vertical do texto. Portanto, a coordenada y está no centro vertical. Esta foi a resposta que eu estava procurando. Obrigado.

— Henry

1

O núcleo da resposta está correto - defina o atributo de linha de base dominante como central, porém attr () não é uma função JS nativa e não há explicação alguma.

— jave.web

30

Se você estiver 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":

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

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

— whyoz
fonte

5

Obrigado por ter a única resposta que funciona no IE. É uma pena que tenhamos que fazer isso, mas as outras respostas me desperdiçaram um tempo significativo fazendo com que tudo funcionasse no Chrome / FF e depois descobrindo que ele não funciona no IE durante os testes do navegador.

— Página Inicial>

Decisão agradável e simples! E devemos lembrar de remover o atributo "alignment-baseline" para omitir sua influência na posição do texto nos navegadores que o suportam.

— YaTaras

7

Depois de examinar a Recomendação SVG, entendi que as propriedades da linha de base são destinadas a posicionar o texto em relação a outro texto, especialmente ao misturar fontes e idiomas diferentes. Se você deseja posicionar o texto para que fique no topo, é ynecessário usá-lo dy = "y + the height of your text".

— rjax
fonte

Aprecie o link para as especificações, algumas leituras realmente úteis por lá. Não estava ciente da "<list-of-lengths>"opção (vinculada) por exemplo (permite manipulação por caractere)

— brichins