Marcadores SVG: pontas de seta que permanecem alinhadas

Para anexar uma ponta de seta personalizada a um traçado SVG, defina sua arte dentro de um <marker> e referencie seu ID com marker-end. Defina refX e refY como o ponto da arte que deve encontrar a extremidade do traçado. Depois, escolha se o marcador deve girar com o traçado e crescer com a largura de seu contorno.

Essas escolhas resolvem problemas diferentes. Uma seta pode apontar na direção certa e ainda não alcançar sua extremidade. Ela também pode se alinhar corretamente em um contorno fino e depois ficar grande demais quando a linha engrossa. Este passo a passo separa posicionamento, direção e tamanho usando uma forma original de ponteiro.

Comece com um SVG pequeno e completo

Salve o seguinte como markers.svg e abra-o em um navegador. O ponteiro é um exemplo feito manualmente, com sua ponta em (11, 6) dentro de um espaço de coordenadas de 12 × 12. Ele não é um resultado de conversão do PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

O primeiro traçado é reto; o segundo é uma curva. Os dois referenciam o mesmo marcador nas duas extremidades. O bloco <defs> armazena a definição, enquanto as referências nos traçados a tornam visível. A referência de marker da MDN aborda as propriedades de anexação no início, no meio e no fim.

Use um ID único no documento que o contém. Se você combinar vários SVGs inline, adicione prefixos aos IDs de seus marcadores e atualize cada referência url(#...) correspondente. O guia de sprites de símbolos SVG explica o mesmo problema de gerenciamento de referências para ícones reutilizados.

Coloque o ponto pretendido na extremidade

refX="11" refY="6" informa qual ponto da arte do marcador deve coincidir com a extremidade do traçado. Ele não move o próprio traçado. Neste exemplo, esse ponto é a ponta afiada.

Compare com refX="0" refY="0". O navegador posiciona a origem das coordenadas do marcador na extremidade, deixando a ponta mais à direita e mais abaixo em uma linha horizontal. Aumentar o tamanho do marcador torna o erro mais visível; não corrige a âncora.

A MDN documenta refX e refY como as coordenadas do ponto de referência do marcador. Leia-as em relação às próprias coordenadas da arte, incluindo seu viewBox, em vez de estimá-las pela largura exibida.

Abrimos o SVG completo separadamente e renderizamos a comparação em um navegador. Alterar o ponto de referência levou a ponta até a cruz laranja. Alterar a orientação inverteu a seta inicial. Alterar o modo de unidades controlou se o ponteiro crescia com a linha. Essas observações se aplicam a este exemplo; inspecione o arquivo exportado real no aplicativo que o receberá.

Uma ponta ancorada exatamente na extremidade também deixa o contorno se estender até esse ponto. Em uma linha grossa, parte do contorno pode continuar visível ao lado de uma ponta estreita, como mostra a comparação. Se essa emenda importa, ajuste o motivo, a âncora ou a extremidade do traçado em conjunto e inspecione a junção. O posicionamento do marcador não apara o contorno subjacente.

Deixe a curva controlar a direção

Para uma ponta de seta no fim de um traçado, orient="auto" segue a direção do traçado nesse ponto. A direção final de uma curva vem de sua tangente local, portanto a seta não precisa apontar na direção da linha reta entre as duas extremidades do traçado.

Para setas nas duas extremidades, use orient="auto-start-reverse". Ele se comporta como auto no fim, mas gira o marcador inicial em mais 180 graus. A documentação de orient da MDN descreve isso como a maneira de reutilizar uma única ponta de seta que aponta para fora nas duas extremidades.

A comparação superior direita torna a diferença visível: com auto, o ponteiro inicial aponta no sentido da curva. Com auto-start-reverse, ele aponta para fora do início. Você não precisa de uma segunda cópia da forma invertida manualmente.

Confira a direção do traçado quando o resultado surpreender você. Inverter um traçado muda qual extremidade é seu início. Uma seta destinada a indicar fluxo deve ser anexada conforme essa direção, mesmo que as duas extremidades ocupem as mesmas posições na tela de antes.

Decida se a espessura da linha deve alterar o tamanho do marcador

markerUnits define o sistema de coordenadas usado para as dimensões e o conteúdo do marcador. Seu padrão é strokeWidth; a alternativa é userSpaceOnUse. Consulte a referência de markerUnits da MDN para essa distinção.

O ponteiro abrange 10 das 12 unidades horizontais de seu viewBox. Com markerWidth="6" e markerUnits="strokeWidth", sua largura sem rotação é 10 / 12 × 6 × stroke-width: 20 unidades do usuário no contorno de 4 unidades e 40 no de 8 unidades. A comparação inferior esquerda usa essas configurações.

Para manter esse ponteiro com 20 unidades de largura nas duas espessuras, altere a definição para:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

A comparação inferior direita usa esses valores. Manter markerWidth="6" e alterar apenas o modo de unidades produziria um ponteiro muito menor, pois seis unidades não seriam mais multiplicadas pela largura do contorno.

userSpaceOnUse não significa uma quantidade fixa de pixels na tela. Escalar o SVG ao redor ou seu sistema de coordenadas ainda pode alterar o tamanho exibido. Inspecione o marcador no tamanho final do layout, especialmente quando um motivo grande é reduzido a uma pequena anotação de diagrama.

Prepare um motivo personalizado antes de torná-lo um marcador

Para um triângulo ou ponteiro simples, desenhe o traçado diretamente. Para uma arte vetorial existente, mantenha os traçados originais e decida qual coordenada deve se anexar à linha. Preserve os vazados intencionais, simplifique detalhes que desaparecem no tamanho pretendido e dê espaço suficiente à arte dentro da área de visualização do marcador.

Se uma ponta de seta ou um motivo decorativo personalizado existe apenas como PNG ou JPG, o fluxo de imagem para vetor do PerfectVector pode ajudar a recuperar uma versão candidata em SVG antes dessa etapa de montagem. Compare a silhueta e as pequenas aberturas com a imagem original, remova formas de fundo indesejadas e escolha os limites e o ponto de ancoragem da arte aprovada. A conversão não cria definições de marcador, não atribui direção ao traçado nem adiciona comportamento de conector de diagrama.

Mantenha as cores explícitas durante os testes. Este exemplo usa um marcador verde-azulado e uma linha azul-marinho para que o limite entre eles continue visível. Se sua seta deve ter uma única cor em toda sua extensão, defina as duas pinturas deliberadamente e inspecione o resultado entregue. O guia de edição de cores SVG aborda preenchimentos fixos e estilos que podem interferir na recoloração.

Confira o arquivo onde ele será usado

Mantenha um mestre editável e teste uma cópia de entrega pelo site, editor ou fluxo de exportação real. Uma prévia correta no navegador demonstra a aparência desse arquivo no navegador; não demonstra o comportamento de importação de todos os aplicativos.

• Confirme que cada url(#...) aponta para o ID de marcador pretendido após a montagem ou otimização.
• Confira traçados retos e curvos, incluindo um marcador inicial se você usar um.
• Compare as espessuras de linha mais fina e mais grossa do desenho.
• Inspecione a ponta, a junção e qualquer arte recortada no tamanho final de exibição.
• Reabra o SVG entregue de forma independente e compare-o com a prévia de origem.

Marcadores são decorações visíveis anexadas a posições de traçado. Eles não criam conexões semânticas entre objetos de diagrama. Para os pontos de conexão e o comportamento de estêncil próprios de um editor de diagramas, use seu sistema nativo de formas; o guia de formas personalizadas do draw.io aborda essa tarefa separada.

Um marcador também não é automaticamente um contorno de corte fisicamente unido. Se o destino precisa de geometria de corte fechada, prepare e inspecione uma cópia de entrega separada baseada em traçados em um editor vetorial. Uma linha e uma ponta de seta que se sobrepõem na tela não comprovam um contorno unido. Outros guias de preparação de SVG abordam a limpeza da arte e as verificações posteriores.

Perguntas frequentes

Por que minha ponta de seta SVG está deslocada da linha? Confira refX e refY em relação às coordenadas da arte do marcador. Eles identificam o ponto posicionado na extremidade do traçado. Neste exemplo, a ponta está em 11,6; usar 0,0 posiciona a origem ali.

Como reutilizo uma ponta de seta nas duas extremidades? Referencie o mesmo marcador com marker-start e marker-end e use orient="auto-start-reverse". A instância inicial se inverte, enquanto a final segue a direção do traçado.

Por que minha ponta de seta cresce quando engrosso a linha? O valor padrão de markerUnits é strokeWidth. Use userSpaceOnUse quando o marcador deve manter seu tamanho nas coordenadas do usuário do elemento e ajuste markerWidth e markerHeight para esse sistema de unidades.

Um marcador transforma a seta em um único traçado fechado? Não. A definição do marcador permanece separada do traçado que a referencia. Prepare e inspecione uma geometria realmente unida se um fluxo posterior de corte ou edição exigir isso.

Fontes

1. MDN — marker — Definições de marcador, formas compatíveis e propriedades de anexação.
2. MDN — refX — Posicionamento horizontal do ponto de referência no sistema de coordenadas do marcador.
3. MDN — refY — Posicionamento vertical do ponto de referência no sistema de coordenadas do marcador.
4. MDN — orient — Rotação automática e inversão da instância inicial.
5. MDN — markerUnits — Dimensionamento relativo ao contorno e nas coordenadas do usuário.

Comece com um motivo e confira sua âncora, direção e tamanho em uma linha e em uma curva. Se seu motivo existe apenas como imagem raster, prepare uma versão candidata em SVG, inspecione sua silhueta e aberturas e monte os traçados aceitos como um marcador.