Meta tags:
description=Aprenda as propriedades de traço do SVG com exemplos executáveis: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset e…;

Headings (most frequently used words):

stroke, propriedade, svg, com, dashoffset, stroking, estilizando, contornos, propriedades, de, traço, prática, width, opacity, linecap, linejoin, miterlimit, dasharray, animando,

Text of the page (most frequently used words):
#stroke (95), html (75), svg (71), traço (29), width (29), title (28), path (26), que (26), para (25), uma (25), propriedade (22), body (19), head (19), l215 (18), com (17), aprender (16), dasharray (14), forma (13), caminho (13), linha (12), padrão (12), 100 (11), none (11), fill (11), como (11), linejoin (10), height (10), dashoffset (10), doctype (10), contorno (10), você (10), miter (10), usada (9), são (9), copiar (9), the (9), document (9), comprimento (9), canvas (9), css (8), linecap (8), cor (8), mais (8), longo (8), por (8), traços (8), 250 (8), mesmo (8), valor (8), ponto (8), round (8), todos (7), propriedades (7), introdução (7), opacity (7), largura (7), ser (7), miterlimit (7), cantos (6), atributos (6), purple (6), espaço (6), define (6), até (6), pode (6), tags (6), w3docs (5), stroking (5), referência (5), result (5), abaixo (5), deslocamento (5), dois (5), valores (5), canto (5), portanto (5), ela (5), bevel (5), butt (5), cada (5), html5 (5), formatter (5), color (5), code (4), generator (4), prática (4), contornos (4), caminhos (4), formas (4), lista (4), exemplo (4), três (4), onde (4), experimente (4), número (4), vez (4), unidades (4), espaços (4), sua (4), limite (4), plana (4), square (4), texto (4), elemento (4), sobre (3), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), aos (3), text (3), dos (3), definir (3), linhas (3), qual (3), 120 (3), style (3), formigas (3), marchando (3), torna (3), efeitos (3), lightgreen (3), mas (3), isso (3), repete (3), tracejado (3), agudo (3), ponta (3), quanto (3), não (3), razão (3), junção (3), borda (3), segmentos (3), aceita (3), coordenadas (3), final (3), sem (3), desenhado (3), desenhada (3), extremidades (3), transparência (3), espessura (3), atributo (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), estilizando (2), this (2), page (2), filtros (2), especificar (2), quando (2), das (2), afirmações (2), seguir (2), verdadeira (2), desenhar (2), veja (2), está (2), line (2), ants (2), class (2), march (2), produz (2), depois (2), anima (2), desse (2), desenho (2), completo (2), base (2), modo (2), relação (2), começa (2), inicial (2), move (2), enquanto (2), orange (2), par (2), igual (2), sólido (2), estender (2), antes (2), cortado (2), qualquer (2), ângulo (2), definido (2), muito (2), agudos (2), deve (2), longas (2), distância (2), substituída (2), encontram (2), estende (2), além (2), extremidade (2), apenas (2), curva (2), metade (2), nas (2), abertas (2), estilizado (2), preenchimento (2), totalmente (2), deixar (2), através (2), também (2), suporte (2), navegadores (2), sorry (2), your (2), browser (2), doesn (2), support (2), inline (2), grupo (2), gradiente (2), hsl (2), pintura (2), defini (2), las (2), accept (2), dir (2), formulários (2), tutorial (2), imagens (2), url (2), http (2), iso (2), elementos (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, aumentar, nos, estilizados, remover, tracejadas, inteiras, dessa, completa, 200, rect, 220, keyframes, infinite, linear, animation, efeito, animação, vai, ciclo, loop, contínuo, total, todo, torne, pareça, sozinha, período, pareçam, mover, marcador, seleção, animado, populares, animando, compartilham, iniciam, deslocamentos, diferentes, aparecem, deslocados, uns, outros, desloca, inicia, positivo, frente, negativo, trás, possível, animar, alterando, gradualmente, fornecer, segunda, torná, funções, alternam, lido, ímpar, significam, seguido, repetido, único, transforma, seu, números, separados, vírgulas, descrevem, comprimentos, aplicados, ordem, alternada, m120, l145, l170, m20, l45, l70, ambos, formam, pico, esquerda, forçado, chanfro, direita, mantém, significa, quatro, vezes, preserva, aproximadamente, amplo, menor, maior, começam, chanfrados, chanfra, quase, reta, grande, permite, picos, pelo, menos, ângulos, podem, produzir, pontas, extremamente, pontiagudas, limita, tamanho, tal, atingir, interno, externa, excederia, essa, silenciosamente, máxima, permitida, entre, m185, l210, l235, m105, l130, l155, m15, l40, l65, arredondado, arco, bordas, externas, estendidas, encontrarem, comuns, lightblue, diferença, visível, espesso, observe, parecem, ligeiramente, compartilhem, mesmas, tampa, adicionada, parece, longa, extra, semicírculo, cujo, raio, adicionado, termina, suave, exatamente, extensão, geométrico, controla, individualmente, independentemente, opacidade, recebe, transparente, opaco, semitransparente, útil, sobrepor, fundo, aparecer, afetar, isolado, interpretado, sistema, equivalentes, simples, usar, explícitas, calculada, diagonal, viewport, altura, porcentagem, 5px, usuário, centralizado, fica, lado, geométrica, conteúdo, fallback, ele, filho, direto, navegador, embutido, exiba, gráfico, modernos, ignoram, renderizam, pink, sejam, visíveis, diferente, nomeada, código, hexadecimal, têm, nada, defina, rgb, nível, outra, resumo, este, capítulo, abrange, conjunto, irá, estilizar, novo, comece, mantenha, mão, consulta, rápida, essas, apresentação, diretamente, elas, herdam, pela, comum, filhas, herdem, aplicada, contrário, pinta, interior, oferece, família, controlam, aspectos, suas, terminadas, seus, unidos, aprenda, executáveis, 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, obsoletos, attributes, radial, lineargradient, sombras, projetadas, desfoque, 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, label, keygen, kbd, isindex, ins, input, img, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, div, dialog, dfn, details, del, datalist, data, colgroup, col, cite, center, caption, button, blockquote, blink, big, bdo, bdi, basefont, audio, aside, article, area, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, áudio, vídeo, semânticos, layout, computercode, arquivo, estilos, scripts, blocos, tabelas, comentários, cores, listas, links, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
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 stroking aprenda as propriedades de traço do svg com exemplos executáveis stroke stroke width stroke linecap stroke linejoin stroke dasharray stroke dashoffset e mais estilizando contornos svg com propriedades de traço o stroke de um elemento svg é a pintura aplicada ao longo do contorno de uma forma linha ou texto ao contrário do fill que pinta o interior o svg oferece uma família de propriedades stroke que controlam todos os aspectos desse contorno sua cor espessura transparência como suas extremidades são terminadas como seus cantos são unidos e se é sólido ou tracejado essas propriedades são atributos de apresentação portanto você pode defini las diretamente em um elemento stroke purple ou através de css stroke purple elas também herdam razão pela qual é comum defini las uma vez em um elemento g grupo e deixar que as formas filhas as herdem este capítulo abrange o conjunto completo de propriedades de traço para as formas que você irá estilizar com traço veja svg path svg line e svg text se você é novo no svg comece com a introdução ao svg e mantenha a referência svg à mão para uma consulta rápida de cada atributo as propriedades de traço em resumo stroke a cor ou outra pintura do contorno stroke width a espessura do contorno stroke opacity o nível de transparência do traço de 0 a 1 stroke linecap a forma desenhada nas extremidades abertas de uma linha butt round ou square stroke linejoin a forma desenhada onde dois segmentos de linha se encontram miter round ou bevel stroke miterlimit o quanto uma junção miter pode se estender antes de ser substituída por um bevel stroke dasharray o padrão de traços e espaços para um contorno tracejado stroke dashoffset a distância ao longo do caminho em que o padrão de traços começa a propriedade stroke a propriedade stroke define a cor do contorno ela aceita qualquer valor de cor css uma cor nomeada um código hexadecimal rgb hsl ou uma referência a um gradiente ou padrão por padrão as formas não têm traço none portanto nada é desenhado até que você defina um no exemplo abaixo fill none é definido no grupo para que apenas os contornos sejam visíveis e cada caminho é estilizado com uma cor diferente doctype html html head title title of the document title head body svg width 250 height 100 sorry your browser doesn t support inline svg g fill none path stroke purple d m5 30 l215 0 path stroke lightgreen d m5 60 l215 0 path stroke pink d m5 90 l215 0 g svg body html copiar experimente você mesmo o texto sorry your browser doesn t support inline svg é conteúdo de fallback ele deve ser um filho de texto direto do elemento svg para que um navegador sem suporte a svg embutido o exiba em vez do gráfico navegadores modernos o ignoram e renderizam o svg a propriedade stroke width a propriedade stroke width define a espessura do contorno o traço é desenhado centralizado no caminho portanto metade de sua largura fica em cada lado da linha geométrica um número isolado é interpretado em unidades de usuário o sistema de coordenadas svg stroke width 5 e stroke width 5px são equivalentes em um svg simples você também pode usar unidades css explícitas px em pt ou uma porcentagem que é calculada em relação à diagonal do viewport svg e não à sua largura ou altura doctype html html head title title of the document title head body svg width 250 height 100 g fill none stroke lightgreen path stroke width 3 d m5 30 l215 0 path stroke width 5 d m5 60 l215 0 path stroke width 7 d m5 90 l215 0 g svg body html copiar experimente você mesmo a propriedade stroke opacity a propriedade stroke opacity controla a transparência do traço individualmente independentemente da opacidade do preenchimento ela recebe um número de 0 totalmente transparente a 1 totalmente opaco um valor como 0 5 torna o traço semitransparente isso é útil para sobrepor contornos ou deixar o fundo aparecer através de um contorno sem afetar o preenchimento da forma doctype html html head title title of the document title head body svg width 250 height 100 g fill none stroke purple stroke width 8 path stroke opacity 1 d m5 30 l215 0 path stroke opacity 0 5 d m5 60 l215 0 path stroke opacity 0 2 d m5 90 l215 0 g svg body html copiar result a propriedade stroke linecap a propriedade stroke linecap define a forma desenhada nas extremidades abertas de um caminho estilizado com traço ela aceita três valores butt o padrão o traço para exatamente no ponto final do caminho com uma borda plana e sem extensão o comprimento desenhado é igual ao comprimento geométrico do caminho round um semicírculo cujo raio é metade da largura do traço é adicionado em cada extremidade portanto a linha se estende além do ponto final por stroke width 2 e termina em uma curva suave square uma tampa plana é adicionada que se estende além do ponto final por stroke width 2 parece com butt mas é mais longa o comprimento extra em cada extremidade é o mesmo que round apenas com uma borda plana em vez de uma curva a diferença é mais visível com um traço espesso observe como as linhas round e square abaixo parecem ligeiramente mais longas do que a linha butt mesmo que todos os três caminhos compartilhem as mesmas coordenadas doctype html html head title title of the document title head body svg width 250 height 100 g fill none stroke lightblue stroke width 10 path stroke linecap butt d m5 30 l215 0 path stroke linecap round d m5 60 l215 0 path stroke linecap square d m5 90 l215 0 g svg body html copiar experimente você mesmo a propriedade stroke linejoin a propriedade stroke linejoin define a forma usada onde dois segmentos de linha de um caminho se encontram os cantos ela aceita três valores comuns miter o padrão as bordas externas dos dois segmentos são estendidas até se encontrarem em um ponto agudo round o canto é arredondado com um arco bevel o canto é cortado com uma borda plana doctype html html head title title of the document title head body svg width 250 height 120 g fill none stroke orange stroke width 12 path stroke linejoin miter d m15 90 l40 20 l65 90 path stroke linejoin round d m105 90 l130 20 l155 90 path stroke linejoin bevel d m185 90 l210 20 l235 90 g svg body html copiar result a propriedade stroke miterlimit quando stroke linejoin é miter ângulos muito agudos podem produzir pontas extremamente longas e pontiagudas a propriedade stroke miterlimit limita o tamanho que tal ponta pode atingir ela define a razão máxima permitida entre o comprimento do miter e a largura do traço onde o comprimento do miter é a distância do canto interno até a ponta externa do ponto se a razão de uma junção excederia o limite essa junção é silenciosamente substituída por um bevel o padrão é 4 o que significa que um miter pode se estender até quatro vezes a largura do traço antes de ser cortado isso preserva o ponto para qualquer ângulo de canto de aproximadamente 29 ou mais amplo quanto mais agudo o canto mais longo o miter portanto quanto menor o limite definido maior o ângulo em que os cantos começam a ser chanfrados um limite de 1 chanfra quase todos os cantos que não são uma linha reta um limite grande como 10 permite até picos muito agudos o valor deve ser pelo menos 1 no exemplo abaixo ambos os caminhos formam o mesmo pico agudo mas o da esquerda stroke miterlimit 1 é forçado a um chanfro enquanto o da direita stroke miterlimit 10 mantém sua ponta doctype html html head title title of the document title head body svg width 250 height 120 g fill none stroke purple stroke width 10 stroke linejoin miter path stroke miterlimit 1 d m20 100 l45 25 l70 100 path stroke miterlimit 10 d m120 100 l145 25 l170 100 g svg body html copiar result a propriedade stroke dasharray a propriedade stroke dasharray transforma um contorno sólido em tracejado seu valor é uma lista de números separados por vírgulas ou espaços que descrevem os comprimentos de traços e espaços aplicados em ordem alternada ao longo do caminho um único valor como stroke dasharray 10 produz traços e espaços de comprimento igual 10 10 dois valores como stroke dasharray 3 5 significam um traço de 3 unidades seguido de um espaço de 5 unidades repetido com um número par de valores a lista é usada como está e se repete se você fornecer um número ímpar de valores o svg repete a lista uma segunda vez para torná la par de modo que as funções de traço espaço se alternam por exemplo stroke dasharray 30 15 10 10 10 15 é lido como um padrão de traço 30 espaço 15 traço 10 espaço 10 traço 10 espaço 15 e depois se repete doctype html html head title title of the document title head body svg width 250 height 100 g fill none stroke orange stroke width 5 path stroke dasharray 3 5 d m5 30 l215 0 path stroke dasharray 12 12 d m5 60 l215 0 path stroke dasharray 30 15 10 10 10 15 d m5 90 l215 0 g svg body html copiar experimente você mesmo a propriedade stroke dashoffset a propriedade stroke dashoffset desloca onde o padrão de traços começa ao longo do caminho um valor de 0 o padrão inicia o padrão no ponto inicial do caminho um valor positivo move o ponto inicial para frente ao longo do caminho enquanto um valor negativo o move para trás é isso que torna possível animar efeitos de formigas marchando ou de desenho de linha alterando gradualmente o deslocamento no exemplo abaixo as três linhas compartilham o mesmo padrão de traços mas o iniciam em deslocamentos diferentes de modo que os traços aparecem deslocados uns em relação aos outros doctype html html head title title of the document title head body svg width 250 height 100 g fill none stroke lightgreen stroke width 5 stroke dasharray 20 10 path stroke dashoffset 0 d m5 30 l215 0 path stroke dashoffset 10 d m5 60 l215 0 path stroke dashoffset 20 d m5 90 l215 0 g svg body html copiar result animando com stroke dashoffset como o deslocamento pode ser animado stroke dashoffset é a base para dois efeitos populares formigas marchando anima o deslocamento por um período completo de traço para que os traços pareçam se mover ao longo do contorno como um marcador de seleção desenho de linha define stroke dasharray com o comprimento total do caminho para que todo o caminho se torne um traço longo depois anima o deslocamento desse comprimento até 0 para que a linha pareça se desenhar sozinha o css abaixo produz o efeito de formigas marchando a animação vai de um deslocamento de 0 a 30 o comprimento de um ciclo de traço mais espaço 15 15 o que torna o loop contínuo doctype html html head title title of the document title style ants stroke purple stroke width 3 fill none stroke dasharray 15 15 animation march 1 s linear infinite keyframes march to stroke dashoffset 30 style head body svg width 220 height 120 rect class ants x 10 y 10 width 200 height 100 svg body html copiar result para desenhar formas inteiras dessa forma veja svg path e svg line a lista completa de atributos de traço está na referência svg prática prática qual is das afirmações a seguir é são verdadeira s sobre o svg stroking em html qual is das afirmações a seguir é são verdadeira s sobre o svg stroking em html a propriedade stroke é usada para definir a cor de uma forma svg a propriedade stroke width é usada para definir a largura do traço em uma forma svg a propriedade stroke dasharray é usada para definir ou remover linhas tracejadas em uma forma svg a propriedade stroke linecap é usada para especificar a cor dos cantos de uma forma svg a propriedade stroke linejoin é usada para especificar a forma a ser usada nos cantos dos caminhos quando são estilizados com traço a propriedade stroke opacity é usada para aumentar a largura do traço em uma forma svg verificar was this page helpful yes no previous svg text next introdução aos filtros svg on this page estilizando contornos svg com propriedades de traço 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 htm...