Ruta SVG
Descripción del elemento <path>
El elemento <path> de SVG especifica una ruta.
Las rutas se utilizan para crear formas complejas que combinan varias líneas rectas o curvas. Las formas complejas que consisten únicamente en líneas rectas pueden crearse como polilíneas. Las polilíneas y las rutas crean formas similares. Sin embargo, las polilíneas requieren líneas rectas más pequeñas para simular curvas.
No se recomienda crear rutas complejas utilizando un editor XML o de texto, ya que comprender su funcionamiento ayuda a detectar y corregir problemas de visualización en SVGs.
La forma de un elemento path se especifica mediante un parámetro: d que contiene otros comandos y parámetros utilizados por dichos comandos. Puede encontrar la lista de comandos a continuación:
- M = moveto
- L = lineto
- H = lineto horizontal
- V = lineto vertical
- C = curveto
- S = curveto suave
- Q = curva Bézier cuadrática
- T = curveto Bézier cuadrática suave
- A = Arco elíptico
- Z = closepath
Todos estos comandos también pueden ejecutarse con letras minúsculas. Las letras mayúsculas indican una forma posicionada absolutamente, mientras que las minúsculas indican una forma posicionada relativamente.
Ejemplo del elemento SVG <path>:
Ejemplo del elemento SVG <path>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="250">
<path d="M190 40 L115 240 L265 240 Z" />
Sorry, inline SVG is not supported by your browser..
</svg>
</body>
</html>Práctica
¿Cuáles son los atributos utilizados en la propiedad 'd' de una Ruta SVG en HTML?