Atributo de trazo SVG

La propiedad 'stroke' define el color del contorno de un elemento gráfico dado. Su valor predeterminado es 'none'.

　Los atributos comunes incluyen:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Atributos de estilo

La propiedad CSS style de stroke y fill especifica las propiedades internas de la forma SVG. Este es un ejemplo:

<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>

En este ejemplo, se define un círculo con un color de trazo azul más oscuro y un relleno de color azul más claro.

Ejemplo de trazo

El trazo de la forma SVG es el contorno de la forma. Este es un ejemplo de trazo SVG:

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

En este ejemplo, se define un círculo con un color de trazo negro (#000000) y sin relleno. Efecto de imagen después de ejecutar:

Ejemplo de trazo y relleno (Stroke & Fill)

Puede combinar los colores de trazo y relleno de SVG en formas SVG. Este es un ejemplo de trazo y relleno de SVG:

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

En este ejemplo, se define un círculo con un azul más oscuro (#000066）color de trazo y azul más claro (#3333ff) círculo de color de relleno. Efecto de imagen después de ejecutar:

stroke-width

SVG tiene stroke-width define la propiedad CSS del ancho del trazo. Este es un SVG stroke-ejemplo de width:

stroke-width:　3px;

En este ejemplo, se establece el ancho de trazo en3píxeles. Puede usar una unidad diferente a los píxeles. EnUnidad del sistema de coordenadas SVG donde se pueden ver todas las unidades disponibles。

Estos son cuatro ejemplos diferentes de stroke-width：

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

píxeles, el espacio entre las líneas punteadas es

Capuchón de línea de trazo (stroke-linecap)

Atributo CSS de SVG stroke-linecap define cómo se presenta el extremo de la línea SVG. La propiedad CSS stroke-linecap tiene tres posibles valores. Estos son:

butt
square
round

Este valor produce un extremo de línea de butt, que cortará exactamente el extremo de la línea. Este valor hace que el extremo de la línea square se vea como butt (cortado), pero ligeramente más allá del final de la línea. Este valor hace que el extremo de la línea round se eleve.

Aquí hay tres SVG stroke-linecap muestra estos tres ejemplos de stroke-El valor de linecap (secuencia = butt, square, round):

Este ejemplo define tres líneas verdes, donde a stroke-ancho10para explicar mejor el efecto del trazo-efecto de la propiedad CSS linecap. Cada línea verde dibujada con el trazo-ancho1esta línea tiene el mismo x1, y1y x2, y2las coordenadas de la línea verde, pero sin stroke-conjunto de linecap. De esta manera, puede ver el efecto de diferentes stroke-linecap)

diferencias entre los valores de conexión de línea de trazo (stroke-linejoin)

La propiedad CSS stroke-linejoin define cómo se renderiza la conexión entre dos líneas en una forma. La propiedad CSS stroke-linejoin pueden adoptar uno de los tres valores. Estos valores son:

miter
round
bevel

Estos son tres stroke SVG-Ejemplo de linejoin, que ilustra estos diferentes valores:

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

stroke-miterlimit

stroke-miterlimit atributo y el estilo de stroke-linejoin se utilizan juntos. Si el trazo-linejoin configurado como miter, entonces el trazo-miterlimit se puede usar para limitar la distancia entre los puntos de intersección de dos líneas (extensión del ángulo de unión).

Este es un SVG stroke-Ejemplo de miterlimit:

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

Por favor, note el trazo-miterlimit, cómo tres rutas utilizan tres valores diferentes, de lo contrario parecen casi idénticas. Efecto de la imagen después de ejecutar:

La longitud de la conexión de línea se llama longitud de unión. La longitud de unión se mide desde el ángulo interno de la conexión de línea hasta el extremo de la conexión de línea. En esta imagen, la longitud de unión se dibuja en rojo en la parte superior de la conexión de línea y se repite nuevamente en el lado derecho de la conexión de línea:

Se puede imaginar que cuanto más ancho sea el viaje, mayor será el ángulo entre las líneas de conexión y más largo será el tiempo de unión.

en el trazo-El valor de miterlimit realmente establece el límite de la proporción entre la longitud del ángulo de unión y el ancho de trazo. Por lo tanto, el trazo-miterlimit es1.0 indica que la longitud máxima del ángulo de miter es1 x. El ángulo de miter excede ese rango.1.0 es el ancho del trazo-el valor posible más pequeño de miterlimit.

A continuación, se presentan algunos ejemplos que utilizan1.0as　stroke-ejemplo de miterlimit, pero los ángulos de conexión de las líneas son diferentes:

Observe que cuando el ángulo es grande, la parte cortada del ángulo es mayor. Esto se debe a que los ángulos agudos naturalmente producen ángulos más largos.

stroke-dasharray + stroke-dashoffset

Atributo CSS de SVG stroke-dasharray se utiliza para dibujar trazos de forma SVG presentados como punteados. Se llama así porque proporciona un array numérico como valor. Estos valores definen la longitud de los guiones y los espacios. Por lo tanto, debe proporcionar un número par de dígitos.

Este es un SVG stroke-ejemplo de dasharray:

<svg　width="500"　height="120">
dashoffset ejemplo:10"　y20"　x10"　y2<line　x20"　y120"　x20"　y2="
　　　　　　0"
　　　　　　stroke-width:　6px;　　stroke-style="stroke:　#000000;　fill:none;　10　5dashoffset:　　/"
</svg>

En este ejemplo, se define un trazo con una línea punteada, el ancho de la parte punteada es10píxeles, el espacio entre las líneas punteadas es5píxeles. Efecto de imagen después de ejecutar:

A continuación, se presentan algunos ejemplos con diferentes anchos de guiones y espacios:

<svg　width="500"　height="120">
dashoffset ejemplo:10"　y20"　x10"　y2<line　x20"　y120"　x20"　y2="
　　　　　　0"
　　　　　　stroke-width:　6px;
　　　　　　stroke-style="stroke:　#000000;　fill:none;　10　5　5　5"　　></line>
dashoffset ejemplo:10"　y20"　x10"　y4<line　x20"　y120"　x20"　y4="
　　　　　　0"
　　　　　　stroke-width:　6px;
　　　　　　stroke-style="stroke:　#000000;　fill:none;　10　5　5　10"　　></line>
</svg>

la primera línea con10comienza con el ancho de línea punteada5comienza, luego es5píxeles, luego es5el otro espacio de la línea punteada. Luego repita el patrón.

píxeles, luego es10la segunda línea con el ancho de línea punteada5comienza, luego es5píxeles, luego es10píxeles, luego es

píxeles, el espacio entre las líneas punteadas es

stroke-Efecto de imagen después de ejecutar:-dashoffset se utiliza para configurar a qué distancia comienza el modo de línea punteada. De esta manera, puede comenzar a dibujar desde la mitad de un patrón, por ejemplo, desde la mitad de un patrón, y luego repetir el patrón desde allí. Este es un SVG stroke

<svg　width="500"　height="120">
dashoffset ejemplo:10"　y20"　x10"　y2<line　x20"　y170"　x20"　y2="
　　　　　　0"
　　　　　　stroke-width:　6px;
　　　　　　stroke-style="stroke:　#000000;　fill:none;　10　5dasharray:-;　　stroke　5;
　　　　　　dashoffset:　　/"
</svg>

>-Este ejemplo configura dash5píxeles, lo que significa que la renderización de la raya punteada comenzará con5píxeles, lo que significa que la renderización de la raya punteada comenzará con

stroke-opacity

Atributo CSS de SVG stroke-La opacidad se utiliza para definir la opacidad del contorno de la forma SVG. stroke-La opacidad toma 0 y1El número decimal entre ellos se acerca más a 0, más transparente es el trayecto. Cuanto más se acerca1cuanto más opaco es el trazo. El stroke predeterminado-El valor de opacidad es1que representa la opacidad total del trazo.

Este es un SVG stroke-Ejemplo de opacidad, que muestra tres líneas con diferentes stroke-línea de texto en la parte superior del texto de opacidad:

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Texto　Behind　Shape</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 es la imagen generada. Nota que el texto trasero se vuelve cada vez menos visible.