Trabalhando com texto em Scalable Vector Graphics (SVG)
Em nossos posts anteriores, usamos o SVG para criar formas. Neste post, como o título disse, vamos olhar para criando texto com SVG. Há muitas coisas que podemos fazer com o texto além do que o texto HTML simples é capaz de fazer.
Então, vamos dar uma olhada.
Implementação Básica
Mas, antes de irmos mais longe, vamos ver como Texto em SVG é formado em seu nível muito básico:
O texto em SVG, como você pode ver no snippet de código acima, é definido com uma tag suficientemente lógica, x e y atributos para especificar as coordenadas da linha de base.
Fonte da imagem: Wikipedia.org
E aqui está como o texto será parecido. Por enquanto parece que não tem diferença com o texto regular em HTML.
Estilos de texto básicos
O texto também pode ser estilizado com propriedades CSS, como espessura da fonte, estilo de fonte, e decoração de texto que pode ser implementado através de estilo interno, estilo interno ou estilo externo como temos discutido no post anterior sobre Styling SVG com CSS. Aqui estão alguns dos exemplos.
Negrito
Este é o texto em Scalable Vector Graphic (SVG)
itálico
Este é o texto em itálico em Scalable Vector Graphic (SVG)
Sublinhado
Este é o texto sublinhado no Scalable Vector Graphic (SVG)
Elemento
Em alguns casos, quando só queremos aplicar estilos ou atributos a uma parte específica do Texto, podemos usar
Isso é ousado ,isso é itálico eesta é sublinhado
Modo de escrita
O texto não é apenas escrito de esquerda para a direita. Em outras partes do mundo, o Japão, por exemplo, o texto é escrito a partir de de cima para baixo. No SVG, isso pode ser feito usando o modo de escrita atributo.
ぁ ぃ ぅ ぇ ぉ か き
No exemplo acima, nós colocamos vários caracteres japoneses aleatórios (não me pergunte o seu significado, eu realmente não tenho idéia) e mudei a orientação com esta declaração de estilo, modo de escrita: tb, Onde tb é de pé de cima para baixo.
Esboço de texto
O texto no SVG é basicamente um gráfico, para que possamos também aplicar o acidente vascular encefálico atributo para adicionar uma linha de borda para o texto, assim como fizemos com as outras formas.
No snippet de código acima, adicionamos o acidente vascular encefálico atributo para o preencher atribuir a Nenhum o que resultará na apresentação do texto a seguir.
Caminho de texto
No SVG, o Texto não só pode ser exibido na horizontal e na vertical, mas também pode siga um padrão Path. Aqui está como fazer isso.
Primeiro, precisamos definir o caminho. No entanto, criar um caminho diretamente em HTML não é tão intuitivo, precisamos entender as coordenadas e alguns comandos que tenho certeza que a maioria de nós tentará evitar. Então, para simplificar essa etapa, sugiro que você simplesmente abra um editor de vetor (Inkscape ou Illustrator), crie um caminho e gere o código SVG.
Então, coloque o defs aqui significa definição.
Observe que também adicionamos um identidade atributo para o identidade ao nosso texto com
Lorem ipsum dolor sit amet consectetur.
Leitura adicional: Caminhos SVG
Gradiente de texto
Adicionando um fundo para preencher o texto também é possível em SVG, e se você tiver sucesso na seção Text Path acima, isso seria muito mais fácil.
Primeiro, precisamos definir as cores do gradiente.
Quando todas as definições necessárias estiverem configuradas, agora só precisamos adicionar o texto e referir preencher atributo para gradiente identidade atributo, como segue;
Gradiente
E aqui está, o texto com gradiente.
Leitura adicional: Gradiente e Padrão SVG
Referências adicionais
O texto no SVG é, sem dúvida, poderoso, na verdade, há muitas coisas que podemos fazer além do que podemos acomodar neste post. Então, abaixo nós reunimos mais algumas referências para servir o seu interesse neste assunto.
- Sobre Fontes em SVG - Divya Manian
- Documentação oficial do SVG Text - W3.org
- SVG Dovumentation na Mozilla Dev. Rede com Exemplos e Ferramentas - MDN
- Atributo do modo de gravação SVG - MDN
- Ver demonstração
- Fonte de download
