Serie SVG - 3, caminos poderosos

Fácil de usar

d: Proceso de ruta.
ancho de trazo: ancho de línea.
trazo: color de línea.

Proceso de ruta:
M 0 0: mover a 0, 0
L 100 100: dibujar línea a 100, 100

<path d="M 0 0 L 100 100" stroke-width="2" stroke="red"/>

Efecto:

camino recto

Mueve el cepillo

M xy: Mover a las coordenadas.
m dx dy: moverse una distancia.

dibujar lineas rectas

L xy: dibujar línea a coordenadas.
l dx dy: dibuja una línea para una distancia.

H x: línea horizontal a la coordenada x.
h dx: distancia dx de la línea horizontal.

V y: línea vertical a la coordenada y.
v dy: línea vertical dy distancia.

camino cerrado

Z
z
dibujará la línea hasta el inicio de la ruta.

Caja: Pentagrama

Algunas puntas de la estrella de cinco puntas:

50 0
98 35
79 91
21 91
2 35

Entonces para dibujar una estrella de cinco puntas es:
135241

<path d="
M 50 0
L 79 91
L 2 35
L 98 35
L 21 91
Z
" fill="red"/>

Efecto:

camino curvo

Bézier cuadrático

Un punto de control, un punto.

Q x1 y1, x y
q dx1 dy1, dx dy

Reutilizar el último punto de control.

T x y (or t dx dy)

tres veces más bezier

Dos puntos de control, un punto.

C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy

Reutilizar el último punto de control.

S x2 y2, x y
s dx2 dy2, dx dy

arco

A 
	rx ry
	x-axis-rotation 
	large-arc-flag 
	sweep-flag 
	x y
a 
	rx ry 
	x-axis-rotation 
	large-arc-flag 
	sweep-flag 
	dx dy

rx ry: dos radios.
x-axis-rotation: El ángulo de rotación.
bandera de arco grande: 0 significa la pieza con un ángulo más pequeño y 1 significa la pieza con un ángulo más grande.
bandera de barrido: 0 en el sentido contrario a las agujas del reloj, 1 en el sentido de las agujas del reloj.
xy, dx dy: coordenadas del punto final.

Caso: Arco

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<path d="M80 80
           a 45 45, 0, 0, 0, 45 45
           Z" fill="red"/>
	<path d="M230 80
           a 45 45, 0, 1, 0, 45 45
           Z" fill="red"/>
	<path d="M80 230
           a 45 45, 0, 0, 1, 45 45
           Z" fill="red"/>
	<path d="M230 230
           a 45 45, 0, 1, 1, 45 45
           Z" fill="red"/>
</svg>

Efecto:
La pequeña pieza utilizada tanto a la izquierda. Grande a la derecha.
Los dos superiores van en sentido contrario a las agujas del reloj. En el sentido de las agujas del reloj abajo.

¿Como entender?
Desde la línea desde el punto inicial hasta el punto final, vaya a un círculo con un radio especificado.
El tamaño del bloque determina si se utiliza una parte grande o una parte pequeña.
En el sentido de las agujas del reloj para determinar si el centro del círculo está a la izquierda o a la derecha.