SVG
Caminos
Buscar..
Introducción
Las rutas son el elemento más flexible de SVG. Una trayectoria es una serie de curvas de Bezier cúbicas o cuadráticas, dispuestas en splines conectadas. Un camino puede estar abierto o cerrado en un bucle, o puede ser complejo con varios subcomponentes. Si una ruta no es simple, la regla de relleno es importante para decidir qué áreas están dentro o fuera de la ruta.
Las rutas normalmente serán generadas por editores automáticos. Normalmente, las rutas cuadráticas se utilizan para las fuentes y las rutas cúbicas para las ilustraciones.
Parámetros
| Atributos / parámetros | Descripción |
|---|---|
| re | Define una secuencia de comandos de dibujo que crean la forma. por ejemplo, d = "M 50,60 L50,60". Los comandos de dibujo en mayúsculas designan coordenadas absolutas. Los comandos de dibujo en minúscula designan coordenadas relativas. |
| (...) | Comandos de dibujo |
| m / m | Mueva la posición actual del dibujo a XY d = "M XY" |
| l / l | Dibuja una línea a X, Y d = "L XY" |
| v / v | Dibuja una línea vertical para Y d = "V Y" |
| S.S | Dibuja una línea horizontal a X d = "H X" |
| Automóvil club británico | Dibuje un arco a X, Y con un radio implícito de Rx y Ry y una rotación especificada por la rotación del eje X. Las grandes banderas de arco y barrido seleccionan cuál de los 4 arcos posibles que satisfacen estas restricciones deben dibujarse. d = "A Rx Ry eje X rotación (grados) gran arco bandera (0/1) barrido bandera (0/1) X, Y". |
| q / q | Dibuje una curva bezier cuadrática a X, Y usando el punto de control X1Y1 d = "X1Y1 X Y" |
| t / t | Dibuje una curva bezier cuadrática abreviada (el punto de control se calcula como una reflexión del punto de control del comando de dibujo q / Q anterior a través de la posición de dibujo actual) |
| c / c | Dibuje una curva bezier cúbica a X, Y utilizando los puntos de control X1, Y1 y X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / s | Dibuje una curva bezier cúbica abreviada (el primer punto de control se calcula como una reflexión del segundo punto de control del comando de dibujo c / C anterior a través de la posición de dibujo actual). |
| - z / z | Cierre la ruta dibujando una línea para comenzar la ruta (o la línea de ruta si se ha usado otra z anteriormente) |
| (...) | (fin de la lista) |
| longitud de la trayectoria | (Opcional) Permite al autor especificar una longitud de ruta nominal que se utilizará para la calibración en otros cálculos, por ejemplo, para texto a lo largo de una ruta |
| Parámetros de trazo | Comunes entre todas las formas y elementos de dibujo. |
| carrera | Color del camino |
| anchura del trazo | Ancho del camino |
Observaciones
Se puede encontrar información detallada sobre el elemento de path SVG en la Recomendación W3C para SVG .
Dibuja una línea diagonal azul usando el comando L path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Resultado:
Dibuja una línea naranja horizontal usando el comando de dibujo H
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Resultado:
Dibuje una cruz roja usando l (línea relativa) comandos de ruta
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Resultado:
Dibuja una línea verde vertical usando el comando V path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Resultado:
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow