09.02.2025

Definindo a Largura do Traço para Lados Específicos de uma Forma SVG

Resposta Rápida

Para definir a propriedade stroke-width para lados específicos de um elemento SVG, crie elementos <path> separados para cada lado que precise de um traço especial. Aqui está um exemplo com caminhos separados para um gerenciamento detalhado do traço:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Este retângulo invisível ajuda a definir as coordenadas -->
  <rect width="100%" height="100%" fill="none" />
  <!-- Traço para a borda superior; é como um "café da manhã" para o SVG -->
  <path d="M 10,10 H 90" stroke="black" stroke-width="1"/>
  <!-- Traço para a borda direita; escolha do cavalheiro! -->
  <path d="M 90,10 V 90" stroke="black" stroke-width="1"/>
</svg>

Trabalhando com a Propriedade Stroke-Dasharray

Para aplicar stroke-width:1 apenas a uma borda, utilize stroke-dasharray. Essa propriedade pode criar uma ilusão óptica ao enfatizar as bordas desejadas em diferentes espessuras:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"
    stroke-dasharray="80, 160" stroke-dashoffset="80"
    stroke="black" fill="none"/>
</svg>

Aqui, stroke-dasharray é definido para criar um comprimento de traço que corresponde à borda selecionada, enquanto o espaço é duas vezes maior, impedindo o desenho de outras bordas.

Usando Máscaras e Clip-Paths para Controle de Precisão

Apesar das limitações de trabalhar com SVG, máscaras e caminhos de recorte oferecem manipulação precisa dos traços das formas:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip-top">
      <rect x="10" y="10" width="80" height="10" />
    </clipPath>
  </defs>
  <rect x="10" y="10" width="80" height="80"
    stroke="black" stroke-width="1" clip-path="url(#clip-top)" />
</svg>

Nesse caso, clip-path é aplicado para que o traço apareça apenas na borda superior.

Visualização

Vamos imaginar as formas SVG como salas: precisamos pintar apenas certas paredes:

🏠 Casa SVG:
🚪🟥🚪🟥       🔲 Sala com todas as paredes pintadas
🟥🚪🚪🚪        🔳 Sala com uma parede pintada

Ao trabalhar com SVG, também destacamos apenas algumas paredes:

🖌️ Equipe de Decoração:
🚪🖼️🚪🖼️       stroke-width:1 nas paredes com quadros
🖼️🚪🚪🚪       Olha, mãe, uma das paredes está destacada!

Superando Limitações com Formas Adicionais

Para criar padrões de traço complexos, você pode usar múltiplos elementos SVG:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Traço para a borda superior; a parte de cima deve sempre estar em cima! -->
  <rect x="10" y="10" width="80" height="1" fill="black" />
  <!-- Traço para a borda direita; o destaque adequado torna nosso trabalho perfeito! -->
  <rect x="89" y="10" width="1" height="80" fill="black" />
</svg>

Usando o Elemento Polyline

O elemento <polyline> pode ser eficaz para acentuar bordas específicas, permitindo que você evite um traço completo:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Sem necessidade de preenchimento interno -->
  <polyline points="10,10 90,10 90,11 10,11" fill="black" />
</svg>

Usando Classes para Reutilização

Criar classes com valores específicos de stroke-dasharray proporciona reutilização e manutenção de código mais fácil:

<style>
  /* Hora dos traços, viva! */
  .stroke-top { stroke-dasharray: 80, 160; stroke-dashoffset: 80; }
</style>

Recursos Úteis

1. stroke - SVG: Scalable Vector Graphics | MDN – informações detalhadas sobre propriedades de traço SVG.
2. SVGator Blog – como usar traços SVG e CSS juntos.
3. javascript - Focar Próximo Elemento no Índice de Tabulação - Stack Overflow – embora o título da consulta não coincida, esse link pode ser útil enquanto você aprende sobre SVG.
4. Usando Máscaras SVG para Delimitar Bordas Específicas – um tutorial sobre como aplicar máscaras SVG e manipular traços.
5. Definindo Bordas Parciais em SVG - Exemplo do CodePen – exemplos ilustrativos de criação de bordas parciais com SVG.

Video

Navigation