Marcador <marker> SVG

As tags SVG são usadas para o início, meio e fim de linhas ou caminhos. Por exemplo, pode-se usar um marcador circular ou quadrado como ponto de início de um caminho de rótulo e um marcador de seta como ponto de fim de um caminho. O elemento marker define os ícones de seta ou gráficos de rótulo multifacetados desenhados em elementos específicos como <path>, <line>, <polyline> ou <polygon>.

Exemplo online de Marker

Este é um exemplo visual simples que mostra a aparência do marcador:

Os marcadores são criados usando o elemento <marker>. O elemento <marker> deve estar aninhado dentro de um elemento <defs>. O elemento <defs> geralmente reserva um grupo de definições reutilizáveis para imagens SVG.
Este é o código SVG do exemplo de gráfico acima:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></círculo>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,11　L10,6　L2,2" estilo="fill: #000000;"/path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10　L150,10　L150,60" estilo="cor: #000000;"6666ff; cor-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">",/path>
</svg>

Primeiro, note que o elemento <defs> contém dois elementos <marker>. Esses dois elementos <marker> definem os marcadores de início e fim exibidos na imagem superior.
Em segundo lugar, note como o elemento <path> usa mark-start e marker-Os atributos end e CSS do estilo referenciam dois elementos <mark>. Este é o modo de especificar o marcador a ser usado para um caminho dado. Eu falarei sobre isso mais tarde.

Definição de Marcação

Você pode usar o elemento <marker> para definir uma marcação. Este é um exemplo:

<marker id="markerCircle" markerWidth="8"markerHeight="8"refX="5"refY="5">
　　　　<circle cx="5" cy="5" r="3"style="stroke: none; fill:#000000;"/>
</marker>

Este exemplo define uma largura de8(markerWidth=“8”) com altura8(markerHeight=“8”) como marcador. Como o marcador é um elemento gráfico separado, é necessário definir explicitamente a largura e a altura.

A propriedade id do elemento <mark> é usada para referenciar este marcador a partir do elemento <path>.

Os valores de coordenação refX e refY definem o ponto dentro da marcação como ponto de referência. O ponto de referência é o ponto usado para posicionar a marcação no início do caminho. Neste exemplo, refX e refY são definidos como o centro do círculo, o que significa que o centro do círculo será colocado no início do caminho. Se não forem definidos refX e refY, eles serão considerados 0, o que fará com que o canto superior esquerdo da marcação esteja no início do caminho.

Dentro do elemento <marker> há um elemento <circle>. O elemento circle é definido para5,5como o centro (cx e cy). O ponto central é o centro da caixa virtual da marcação. Não é a posição real onde a marcação é colocada na imagem. Use markerWidth e markerHeight para definir o tamanho da caixa virtual dentro do elemento <marker>.8.8.

Orientação Automática

Este é outro exemplo de definição de <marker>. Este exemplo define um triângulo usado como seta de caminho.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"width="5"height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13"markerHeight="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

O elemento <path> dentro do elemento <marker> desenha um triângulo com a ponta apontando para a direita. No entanto, se o caminho não for uma linha horizontal, é necessário rotacionar o triângulo para se ajustar à direção do caminho que o utiliza. Isso pode ser feito definindo a propriedade 'direção' (orient) como 'auto'. Isso rotaciona a forma dentro do elemento <marker> para se ajustar ao caminho que a referencia.

A imagem a seguir mostra cinco linhas com diferentes inclinações, todas usando os mesmos dois marcadores como marcador de início e marcador de fim. Observe como os marcadores rotacionam automaticamente para se adaptar à inclinação da linha que os utiliza.

O efeito de execução é o seguinte:

Este é o resultado de definir a propriedade orient do elemento <mark> como auto.

Também pode definir o valor da propriedade orient como um ângulo fixo (por exemplo45O valor da propriedade orient será rotacionado ao usar a marcação. No entanto, isso não é tão útil quanto a função de orientação automática.

Referência de marcadores de caminhos

Você pode usar os seguintes atributos CSS para referenciar marcadores de caminhos:

• marker-start

• marker-mid

• marker-end

Esses três atributos CSS atribuem o marcador aos pontos de início, meio e fim do caminho.

As propriedades CSS devem estar localizadas dentro do atributo style do elemento <path> que as usa. Você pode referenciar o elemento <marker> usando seu atributo id, conforme mostrado a seguir:

marker-start: url(#markerId);

markerId deve ser substituído pelo valor do atributo id do elemento <mark> a ser referenciado.

Este é um exemplo que usa todos os três atributos CSS:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"width="5"height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13"markerHeight="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

O resultado da execução é o seguinte:

Referência de marcadores de outras formas

O elemento <path> não é o único que pode usar marcadores no SVG. 　 <line>, <polyline> e <polygon> também podem usar marcadores. Eles operam da mesma forma que o elemento <path>: através do início do marcador, do meio do marcador e do fim do marcador (respectivamente: marker-start, marker-mid e marker-Referência ao atributo id do elemento <marker> dentro da propriedade CSS end.

Unidades de marcador

O tamanho do marcador pode ser ajustado para escalar, para se adequar à largura da linha do caminho que ele usa. Aqui está um exemplo visual:

Ao definir o markerUnits do elemento <marker> como strokeWidth, é possível alcançar esse efeito. Essa é realmente o valor padrão dessa propriedade, então, mesmo que você não configure a propriedade markerUnits, isso é o comportamento padrão. Aqui está o aspecto do código SVG:

<marker id="markerSquare" markerWidth="7"markerHeight="7"refX="4"refY="4"
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1"y="1"width="5"height="5"style="stroke: none; fill:#000000;"/>
</marker>

Para evitar que o marcador se ajuste automaticamente para se adaptar à largura do traço do caminho, defina a propriedade markerUnits como userSpaceOnUse. Dessa forma, o marcador manterá seu tamanho, independentemente da largura do traço do caminho que estiver usando.