Formas avanzadas SVG

Segmentos

• Salto absoluto: M x,y
• Salto relativo: m x,y
• Segmento absoluto: L x,y
• Segmento relativo: l x,y
• Segmento horizontal absoluto: H x
• Segmento horizontal relativo: H x
• Segmento vertical absoluto: V x
• Segmento vertical relativo: v x

Un salto desplaza el cursor sin dibujar ningún trazo. Los segmentos dibujan un segmento recto desde la posición anterior del cursor. Saltos y segmentos se pueden definir de forma absoluta (coordenadas del cursor) o relativa (desplazamiento entre posiciones del cursor).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="140" height="110" viewBox="0 0 140 110">
  <path d="M 10,70 L 30,40 L 70,100 L 130,10"
        fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="140" height="110" viewBox="0 0 140 110">
  <path d="m 10,70 l 20,-30 l 40,60 l 60,-90"
        fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="140" height="90" viewBox="0 0 140 90">
  <path d="M 10,80 H 130 V 10 H 60 V 40"
        fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="140" height="90" viewBox="0 0 140 90">
  <path d="m 10,80 h 120 v -70 h -70 v 30"
        fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

Arcos elípticos

Un arco elíptico dibuja una curva elíptica desde la posición anterior del cursor hasta la posición siguiente. Como hay infinitas curvas elípticas que pasan por dos puntos, se necesitan parámetros adicionales adicionales para especificar la curva deseada. La expresión general del arco es la siguiente:

• Arco absoluto: A rx,ry rotacionEjeX arcoGrande,sentidoGiro x,y
• Arco relativo: A rx,ry rotacionEjeX arcoGrande,sentidoGiro x,y

siendo:

• x,y: punto final del arco
• rx,ry: semiejes de la elipse que pasa por el punto inicial y el final.
• rotacionEjeX: inclinación de la elipse (entre 0 y 360 grados)

Notas:

• Para que las elipses tengan un semieje horizontal y el otro vertical, los valores de los semiejes deben ser las distancias entre los puntos.
• No tengo claro cómo funciona el parámetro inclinación.

Puesto que hay dos elipses que cumplen las condiciones anteriores (pasan por los dos puntos, tienen esos semiejes y esa inclinación), hay cuatro posibles arcos, que se especifican con dos parámetros:

• arcoGrande: indica si es el arco más corto (0) o el más largo (1)
• sentidoGiro: indica si se recorre el arco en sentido horario (0) o antihorario (1)

En los ejemplos siguientes se dibujan los cuatro arcos posibles para unos semiejes e inclinación dados:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="300" height="200" viewBox="0 0 300 200">
  <path d="M 80,70 A 70,30 0 0,0 150,40"
    fill="none" stroke="RoyalBlue" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 0,1 150,40"
    fill="none" stroke="red" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 1,0 150,40"
    fill="none" stroke="green" stroke-width="3" />
  <path d="M 80,70 A 70,30 0 1,1 150,40"
    fill="none" stroke="gold" stroke-width="3" />
</svg>

Curvas de Bézier cúbicas

Por escribir.

Curvas de Bézier cuadráticas

Por escribir.

Cerrar caminos

• Cerrar caminos: Z o z

Al cerrar una curva se une el último punto con el primero.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="140" height="110" viewBox="0 0 140 110">
  <path d="M 10,70 L 30,40 L 70,100 L 130,10 L 130,70 Z"
        fill="none" stroke="RoyalBlue" stroke-width="3" />
</svg>

Caminos compuestos

Por escribir.