CSS propriedade marker

Definição e uso

marker A propriedade aponta para um marcador que será desenhado em todos os pontos de topo do caminho do elemento (isto é, os primeiros, no meio e os últimos pontos de topo).

A forma do marcador é definida pelo elemento SVG <marker> e referenciada pelo valor url().

CSS marker O valor dessa propriedade substitui qualquer valor da propriedade marker no SVG.

Exemplo

Exemplo 1

Aponta para um marcador (seta) que será desenhado nos primeiros, no meio e nos últimos pontos de topo do caminho do elemento:

#test {
  marker: url(#arrow);
}

Experimente você mesmo

Exemplo 2

Aponta para um marcador (círculo) que será desenhado nos primeiros, no meio e nos últimos pontos de topo do caminho do elemento:

#test {
  marker: url(#circle);
}

Experimente você mesmo

Sintaxe CSS

marker: none|url|initial|inherit;

Valor da propriedade

Valor Descrição
none Valor padrão. Não será desenhado nenhum marcador no caminho.
url Referência de URL para o marcador definido pelo elemento SVG <marker>.
initial Defina essa propriedade para seu valor padrão. Consulte initial。
inherit Herda essa propriedade do elemento pai. Consulte inherit。

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Ópera
80 80 72 13.1 67

Páginas relacionadas

Tutorial:Marcador SVG

Referência:CSS propriedade marker-start

Referência:CSS propriedade marker-mid

Referência:CSS propriedade marker-end