Meta tags:
description=O elemento SVG text renderiza texto em SVG. Aprenda text-anchor, rotate, tspan e textPath com exemplos executáveis e dicas de estilo.;

Headings (most frequently used words):

text, elemento, svg, do, texto, com, exemplo, descrição, estilo, acessibilidade, atributos, prática, rotacionando, transform, vs, atributo, rotate, alinhando, anchor, dominant, baseline, usando, tspan, para, múltiplas, linhas, colocando, em, um, caminho, textpath, usado,

Text of the page (most frequently used words):
svg (75), html (69), text (65), texto (50), title (25), para (22), #elemento (18), tspan (17), aprender (16), font (15), body (15), head (15), #atributos (13), linha (13), exemplo (12), como (11), rotate (10), por (10), style (10), width (10), com (10), canvas (10), middle (9), anchor (9), atributo (9), especifica (9), fill (9), the (9), base (8), copiar (8), height (8), você (8), doctype (8), this (7), não (7), mesmo (7), document (7), elementos (7), css (6), estilo (6), path (6), coordenada (6), relação (6), 250 (6), stroke (6), border (6), 1px (6), solid (6), textpath (6), caminho (6), 125 (6), tags (6), w3docs (5), todos (5), size (5), alinhamento (5), cada (5), use (5), transform (5), uma (5), posição (5), purple (5), example (5), forma (5), que (5), sorry (5), your (5), browser (5), doesn (5), support (5), inline (5), cccccc (5), linhas (5), padrão (5), introdução (5), html5 (5), formatter (5), color (5), code (4), generator (4), prática (4), dominant (4), baseline (4), sua (4), define (4), family (4), vertical (4), horizontal (4), end (4), start (4), rotaciona (4), dentro (4), experimente (4), string (4), idioma (3), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), acessibilidade (3), descrição (3), qual (3), horizontalmente (3), suporta (3), weight (3), isso (3), anterior (3), label (3), img (3), pode (3), abaixo (3), layout (3), spacing (3), href (3), defs (3), 120 (3), separados (3), quando (3), único (3), quebra (3), referência (3), coordenadas (3), templates (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), page (2), stroking (2), center (2), centraliza (2), também (2), evento (2), globais (2), normal (2), bold (2), tipografia (2), hanging (2), largura (2), deve (2), textlength (2), glifo (2), individual (2), inteiro (2), deslocamento (2), inicial (2), aria (2), role (2), desenhado (2), gráficos (2), filho (2), propriedades (2), específicas (2), comuns (2), são (2), consulte (2), tabela (2), letter (2), decoration (2), intro (2), curve (2), fazer (2), qualquer (2), outra (2), seu (2), longo (2), seja (2), element (2), 150 (2), usa (2), três (2), partes (2), compartilham (2), pai (2), permanece (2), formatação (2), automaticamente (2), dividir (2), bloco (2), várias (2), sem (2), red (2), rótulos (2), mas (2), controla (2), valores (2), centralizar (2), central (2), caractere (2), inclinar (2), torno (2), ponto (2), diferentes (2), usar (2), renderizado (2), gradiente (2), accept (2), dir (2), formulários (2), tutorial (2), imagens (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, align, italic, peso, tamanho, 5em, arial, sans, serif, caber, comprimido, esticado, ajustar, definida, pelo, lengthadjust, accessible, portanto, nem, sempre, exposto, tecnologias, assistivas, mesma, comum, svgs, significativos, primeiro, adicione, leitores, tela, anunciem, estilizado, definir, mais, cor, contorno, relacionados, verdana, apresentação, 2em, blue, _blank, target, learn, usado, flowing, along, curved, m20, q150, 280, 300, seguir, curva, envolva, aponte, então, flui, desse, defina, reutilizável, capítulo, entender, funcionam, dados, colocando, 115, used, with, green, 450, posicionar, vez, pertencem, juntas, rótulo, acessível, herda, parte, forem, genuinamente, independentes, permite, alterar, trecho, lógico, próprio, deslocar, sair, usando, múltiplas, dasharray, line, próximo, alinha, diferente, tracejada, verticalmente, bottom, alphabetic, auto, começa, centralizado, termina, essencial, marcam, situam, dois, alteram, alfabética, início, alinhando, glyphs, rotated, outro, lado, individualmente, inteira, graus, lugar, letras, ficam, ângulo, ainda, corre, reta, toda, inclinada, angle, existem, duas, maneiras, rotacionar, elas, fáceis, confundir, rotacionando, estilizar, word, kerning, possível, ter, conteúdo, vários, idiomas, substituindo, diversas, strings, preferido, usuário, glifos, complexo, orientação, esquerda, direita, bidirecional, necessidades, processamento, internacional, recursos, tipográficos, decorações, escolha, uso, ligaduras, discricionárias, estilísticas, históricas, nova, alcança, borda, posicioná, las, manualmente, própria, fluir, nota, gráfico, utilizado, exibir, ele, colocado, posicionado, pelas, suas, aplicar, recorte, máscara, filtro, assim, outros, esteja, será, renderiza, aprenda, executáveis, dicas, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, obsoletos, attributes, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, polyline, polygon, elipse, círculo, retângulo, gradientes, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, table, sup, summary, sub, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, link, legend, keygen, kbd, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, footer, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, audio, aside, article, area, applet, address, acronym, abbr, obsoletas, xhtml, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, vídeo, semânticos, computercode, caminhos, arquivo, estilos, scripts, blocos, tabelas, comentários, cores, listas, links, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
svg text aprender html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset svg text o elemento svg text renderiza texto em svg aprenda text anchor rotate tspan e textpath com exemplos executáveis e dicas de estilo descrição do elemento text o elemento svg text especifica um elemento gráfico utilizado para exibir texto ele é colocado dentro de um elemento svg e posicionado pelas suas coordenadas x e y você pode aplicar um padrão caminho de recorte máscara gradiente ou filtro ao text assim como em outros elementos gráficos svg qualquer texto que não esteja dentro de um elemento text não será renderizado nota o text svg não quebra automaticamente um único elemento text é renderizado em uma linha o texto não quebra para uma nova linha quando alcança a borda do canvas svg para dividir o texto em várias linhas você deve posicioná las manualmente com elementos tspan cada um com sua própria coordenada y usar elementos text separados ou fazer o texto fluir ao longo de um caminho com textpath o texto svg suporta recursos tipográficos como decorações de texto escolha de tipografia e uso de ligaduras discricionárias estilísticas ou históricas o svg também suporta necessidades de processamento de texto internacional texto da esquerda para a direita ou bidirecional orientação vertical e horizontal do texto layout de texto complexo alinhamento de glifos a diferentes linhas de base é possível ter conteúdo svg em vários idiomas substituindo diversas strings de texto com base no idioma preferido do usuário para estilizar o texto você pode usar propriedades css específicas de texto como font family font size kerning letter spacing word spacing text decoration stroke stroke width e fill exemplo do elemento svg text doctype html html head title title of the document title head body svg width 250 height 60 text x 20 y 25 fill purple this is a svg text example text sorry your browser doesn t support inline svg svg body html copiar experimente você mesmo rotacionando texto transform vs o atributo rotate existem duas maneiras diferentes de rotacionar texto svg e elas são fáceis de confundir transform rotate angle cx cy rotaciona o elemento text inteiro como um bloco único em torno de um ponto central a string permanece reta toda a linha é inclinada o atributo rotate rotaciona cada glifo caractere individual no lugar as letras ficam em um ângulo mas a linha de texto ainda corre horizontalmente o exemplo abaixo usa transform para inclinar a linha inteira em 40 graus em torno do ponto 30 60 doctype html html head title title of the document title head body svg width 250 height 150 style border 1px solid red text x 20 y 25 fill purple transform rotate 40 30 60 this is a svg text example text sorry your browser doesn t support inline svg svg body html copiar experimente você mesmo por outro lado o atributo rotate rotaciona cada caractere individualmente sem inclinar a linha de base doctype html html head title title of the document title head body svg width 250 height 80 style border 1px solid cccccc text x 20 y 50 fill purple rotate 25 glyphs rotated text sorry your browser doesn t support inline svg svg body html copiar alinhando texto com text anchor e dominant baseline por padrão as coordenadas x y marcam o início do texto e se situam na linha de base alfabética dois atributos alteram isso text anchor controla o alinhamento horizontal em relação a x valores start padrão o texto começa em x middle o texto é centralizado em x e end o texto termina em x isso é essencial para centralizar rótulos dominant baseline controla o alinhamento vertical em relação a y valores comuns auto alphabetic padrão middle central hanging e text bottom use middle para centralizar verticalmente o texto na coordenada y no próximo exemplo todos os três rótulos compartilham o mesmo x 125 mas text anchor os alinha de forma diferente em relação à linha de referência tracejada doctype html html head title title of the document title head body svg width 250 height 120 style border 1px solid cccccc line x1 125 y1 0 x2 125 y2 120 stroke red stroke dasharray 4 text x 125 y 30 text anchor start start text text x 125 y 60 text anchor middle middle text text x 125 y 90 text anchor end end text svg body html copiar usando tspan para múltiplas linhas o elemento tspan é filho de text e permite alterar a posição o estilo ou a formatação de um trecho de texto sem sair do elemento text pai como o texto svg não quebra automaticamente tspan é a forma padrão de dividir um bloco lógico de texto em várias linhas dê a cada tspan seu próprio x e y ou use dy para deslocar em relação à linha anterior use tspan em vez de elementos text separados quando as partes pertencem juntas como um único rótulo acessível ou compartilham estilo um tspan herda os atributos do pai e permanece parte do mesmo nó de texto use elementos text separados quando as partes forem genuinamente independentes o exemplo abaixo usa tspan para posicionar três linhas doctype html html head title title of the document title head body svg width 450 height 150 style border 1px solid cccccc text x 20 y 20 style fill green example of the svg text element used with the tspan element tspan x 25 y 65 this is a svg text tspan tspan x 35 y 90 this is a svg text tspan tspan x 45 y 115 this is a svg text tspan text sorry your browser doesn t support inline svg svg body html copiar experimente você mesmo colocando texto em um caminho com textpath para fazer o texto seguir uma curva ou qualquer outra forma envolva o em um elemento textpath e aponte seu href para o id de um path ou outra forma o texto então flui ao longo desse caminho defina o caminho dentro de defs para que seja reutilizável e não seja desenhado por si mesmo consulte o capítulo svg path para entender como funcionam os dados de caminho d doctype html html head title title of the document title head body svg width 300 height 120 style border 1px solid cccccc defs path id curve d m20 90 q150 10 280 90 defs text fill purple textpath href curve text flowing along a curved path textpath text svg body html copiar exemplo do elemento svg text usado com o elemento a doctype html html head title title of the document title head body svg width 250 height 60 style border 1px solid cccccc a href learn html svg intro target _blank text x 20 y 40 fill blue font size 2em svg intro text a sorry your browser doesn t support inline svg svg body html copiar experimente você mesmo estilo e acessibilidade o texto dentro de text e tspan é estilizado com propriedades específicas de texto que você pode definir como atributos de apresentação por exemplo font size 20 font weight bold font family verdana ou com css os mais comuns são font family font size font weight font style text decoration letter spacing fill a cor do texto e stroke stroke width o contorno consulte a tabela de atributos abaixo para os atributos relacionados ao layout acessibilidade o texto svg é desenhado como gráficos portanto nem sempre é exposto a tecnologias assistivas da mesma forma que o texto html comum dê a svgs significativos um title como primeiro filho do elemento svg ou text e adicione aria label role img para que leitores de tela o anunciem por exemplo svg width 250 height 60 role img aria label svg text example title svg text example title text x 20 y 40 fill purple accessible svg text text svg copiar atributos atributo descrição x especifica a coordenada x inicial da linha de base do texto y especifica a coordenada y inicial da linha de base do texto dx especifica o deslocamento horizontal de uma posição de texto em relação à posição de texto anterior dy especifica o deslocamento vertical de uma posição de texto em relação à posição de texto anterior rotate rotaciona cada glifo individual não o elemento inteiro use transform rotate para isso lengthadjust especifica como o texto é comprimido ou esticado para ajustar a largura definida pelo atributo textlength textlength especifica a largura na qual o texto deve caber text anchor especifica o alinhamento horizontal do texto start middle ou end dominant baseline especifica o alinhamento vertical do texto em sua linha de base por exemplo middle hanging font family define a tipografia por exemplo arial sans serif font size define o tamanho do texto por exemplo 20 ou 1 5em font weight define o peso por exemplo normal ou bold font style define o estilo por exemplo normal ou italic o elemento svg text também suporta os atributos globais e os atributos de evento prática prática qual atributo centraliza o texto svg horizontalmente na sua coordenada x qual atributo centraliza o texto svg horizontalmente na sua coordenada x text anchor middle dominant baseline middle rotate 90 text align center verificar was this page helpful yes no previous svg path next svg stroking on this page descrição do elemento text estilo e acessibilidade atributos prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores