Formas avanzadas SVG

En esta lección se tratan las formas avanzadas SVG y su principales atributos. La etiqueta principal de SVG, la etiqueta <svg>, se comenta en la lección SVG. Las formas básicas SVG (líneas, rectángulos, círculos, cuvas, etc.) se comentan en la lección Formas básicas SVG.

Forma general: <path />

La forma general SVG es el camino <path />. La etiqueta <path /> permite dibujar cualquier tipo de curva.

El atributo principal propio de <path /> es:

A continuación se comenta cómo especificar los diferentes tipos de curvas que se pueden dibujar entre los puntos: segmentos, curvas elípticas, curvas de Bézier cúbicas y curvas de Bézier cuadráticas.

Segmentos

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:

siendo:

Notas:

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:

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

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.