Propriedade stroke SVG

A propriedade stroke define a cor da contorno do elemento gráfico especificado. Seu valor padrão é none.

　Propriedades comuns incluem:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Propriedades de estilo

A propriedade CSS style do stroke e fill especifica as propriedades internas da forma SVG. Este é um exemplo:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

Neste exemplo, define-se uma cor de traço azul mais escuro e um preenchimento azul mais claro no círculo.

Exemplo de traço

O traço da forma SVG é o contorno da forma. Este é um exemplo de traço SVG:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Neste exemplo, define-se uma cor de traço preta (#000000) e sem preenchimento no círculo. Efeito da imagem após a execução:

Exemplo de traço e preenchimento (Stroke & Fill)

Você pode combinar as cores de traço e preenchimento do SVG em formas SVG. Este é um exemplo de traço e preenchimento SVG:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

Neste exemplo, define-se um preenchimento azul mais escuro (#000066）cor do traço e azul mais claro (#3333ff) preenchimento de cor circular. Efeito da imagem após a execução:

stroke-width

SVG tem stroke-width define a propriedade CSS de largura do traço. Este é um SVG stroke-exemplo de width:

stroke-width:　3px;

Neste exemplo, o comprimento da caneta é definido como3pixels. Você pode usar unidades diferentes dos pixels. EmUnidades disponíveis no sistema de coordenadas SVG。

Este são quatro exemplos diferentes de stroke-width：

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

O efeito da imagem após a execução:

cap de linha de contorno (stroke-linecap)

A propriedade CSS do SVG stroke-linecap define como a extremidade da linha SVG deve ser apresentada. A propriedade CSS stroke-linecap tem três valores possíveis. Eles são:

butt
square
round

Este valor gera um cap de linha butt, que corta exatamente o final da linha. Este valor faz com que o square pareça como butt (cortado), mas um pouco além do final da linha. Este valor gera o limite superior da linha round.

Existem três SVG stroke-linecap mostra esses três exemplos de stroke-O valor de linecap (sequência = butt, square, round):

Este exemplo define três linhas verdes, onde a tração-largura10para melhor explicar a tração-da propriedade CSS tração-largura1esta linha tem o mesmo x1, y1e x2, y2Os efeitos do CSS tração-linecap)-diferenças entre os valores de tração

ligação de linha de tração (tração-linejoin)

A propriedade CSS tração-A propriedade linejoin define como a conexão entre duas linhas de uma forma é renderizada. A propriedade CSS tração-linejoin que pode adotar um dos três valores. Esses valores são:

miter
round
bevel

São três SVG tração-Exemplo de linejoin, que ilustra esses diferentes valores:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;tração-width:16px;tração-linejoin: miter;"　></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;tração-width:16px;tração-linejoin: round;"　></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;tração-width:16px;tração-linejoin: bevel;"　></path>
<text　x="222"　y="20">bevel</text>
</svg>

stroke-miterlimit

estilo de stroke-propriedade miterlimit com a tração-linejoin usados juntos. Se a tração-Se o linejoin for configurado para miter, a tração-O miterlimit pode ser usado para limitar a distância entre os pontos de interseção de duas linhas (extensão do canto).

Este é um SVG stroke-Exemplo de miterlimit:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;　       　　　　　　　　　　　tração-miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;　       　　　　　　　　　　　tração-miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="tração: #000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;　       　　　　　　　　　　　tração-miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>

Atenção para a tração-miterlimit, três caminhos como usar três valores diferentes, de outra forma eles parecem quase idênticos. Efeito da imagem após a execução:

O comprimento da conexão da linha chamada de comprimento do canto. O comprimento do canto é medido do ângulo interno da conexão da linha até o ponto final da conexão da linha. Neste gráfico, o comprimento do canto é desenhado em vermelho na parte superior da conexão da linha e repetido novamente no lado direito da conexão da linha:

Pode imaginar que quanto maior a largura do percurso, maior o ângulo entre as linhas de ligação e maior o tempo de canto.

na tração-O miterlimit realmente define o limite da taxa entre o comprimento do canto e a largura da tração. Portanto, a tração-miterlimit para1.0 representa que a maior largura da aresta afiada é1 a largura do traço x. A aresta afiada está fora desse intervalo.1.0 é stroke-miterlimit do valor mínimo possível.

A seguir, alguns exemplos usando1.0as　stroke-miterlimit valores exemplo, mas os ângulos de conexão da linha são diferentes:

Observe que, quando o ângulo é grande, a parte cortada da aresta é maior. Isso acontece porque os ângulos agudos naturalmente produzem arestas mais longas.

stroke-dasharray + stroke-dashoffset

A propriedade CSS do SVG stroke-O dasharray é usado para desenhar traços SVG que aparecem como traços tracejados. O nome "array de traços" se deve ao fato de você fornecer um array de números como valor. Esses valores definem a largura dos traços tracejados e dos espaços. Portanto, você deve fornecer um número par.

Este é um SVG stroke-dasharray exemplo:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　stroke-dasharray:　10　5"　　/>
</svg>

Neste exemplo, define-se um traço com traços tracejados, a largura do traço tracejado é10píxeis, o espaçamento entre os traços tracejados é5píxeis. O efeito da imagem após a execução:

A seguir, alguns exemplos com diferentes larguras de traços tracejados e espaçamento de traços tracejados:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

a primeira linha com10começando com a largura do traço tracejado5píxeis, seguido pelo5píxeis, seguido pelo5píxeis, seguido pelo outro espaçamento. Em seguida, repita o padrão.

a segunda linha com a largura do traço tracejado10começa, seguido por5píxeis, seguido pelo5píxeis, seguido pela10píxeis, a espaçamento entre as traços tracejados.

O efeito da imagem após a execução:

stroke-O dashoffset é usado para definir a distância a partir da qual o modo de traço tracejado começa. Dessa forma, você pode começar a traçar no meio de um padrão, por exemplo, do meio de um padrão, e repetir a partir daí. Este é um SVG stroke-dashoffset exemplo:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

Neste exemplo, o dash é configurado para-com offset de5píxeis, o que significa que a renderização da traço tracejado será5píxeis, começando a entrar no modo de traço tracejado (não todos os navegadores suportam completamente essa função). O efeito da imagem após a execução:

stroke-opacity

A propriedade CSS do SVG stroke-o opacity é usado para definir a opacidade da contorno de forma SVG. stroke-o valor de opacity é 0 e1o valor decimal entre eles que se aproxima de 0, mais transparente é a cor. Quanto mais se aproxima de1quanto mais opaco for o traço. O stroke padrão-O valor de opacity é1que representa a opacidade completa da traça.

Este é um SVG stroke-Exemplo de opacity, onde são mostradas três linhas com diferentes stroke-linha de texto no topo da opacidade text:}

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Texto Por Trás da Forma</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

Esta é a imagem gerada. Observe que o texto ao fundo se torna cada vez menos visível.