ruta SVG
ruta SVG - <ruta>
<Ruta> se utiliza para definir una trayectoria.
El siguiente comando se puede utilizar para los datos de la ruta:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = lineto verticales
- C = curveTo
- S = curveTo suave
- Q = curva de Bézier cuadrática
- T = suave curveTo Bézier cuadrática
- A = arco elíptico
- Z = closePath
Nota: Todos los comandos anteriores permiten letras minúsculas. El capital representa la posición absoluta, posicionamiento relativo indica minúsculas.
Ejemplo 1
El ejemplo anterior define un camino que comienza en la posición 1500, la posición 75200 alcanzado, y luego desde allí a 225 200 en 1500 y, finalmente, el camino cerrado.
Aquí está el código SVG:
Ejemplos
<Ruta d = "0 M150 L75 L225 200 200 Z" />
</ Svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
Ejemplo 2
Utilizando la curva de Bezier modelo de curva suave que se puede escalar de forma indefinida. En circunstancias normales, el usuario selecciona uno o dos puntos finales y los dos puntos de control. Un punto de control de una curva de Bézier que se llama una curva cuadrática de Bézier y los dos puntos de control son llamados cubos.
El siguiente ejemplo crea un cuadráticas curvas de Bezier, A y C son los puntos inicial y final, B es un punto de control:
Aquí está el código SVG:
Ejemplos
<Ruta id = "lineAB" d = "M 100 350 150 -300 l" golpe = "red"
stroke-width = "3" llenar = "none" />
<Ruta id = "lineBC" d = "M 250 50 150 300 l" golpe = "red"
stroke-width = "3" llenar = "none" />
<Ruta d = "M 175 200 150 0 l" golpe = "green" stroke-width = "3"
llenar = "none" />
<Ruta d = "M 100 350 150 -300 300 q 0" golpe = "blue"
stroke-width = "5" llenar = "none" />
<! - Marcar puntos relevantes ->
<G accidente cerebrovascular = "negro" stroke-width = "3" llenar = "negro">
<Círculo id = "punto A" cx = "100" cy = "350" r = "3" />
<Círculo id = "pointB" cx = "250" cy r = "50" = "3" />
<Círculo id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Etiquetar los puntos ->
<G font-size = "30" font = "sans serif" llenar = carrera "negro" = "ninguno"
text-anchor = "middle">
<Texto x = "100" y = "350" dx = "- 30"> A </ texto>
<Texto x = "250" y = "50" dy = "- 10"> B </ texto>
<Texto x = "400" y = "350" dx = "30"> C </ texto>
</ G>
</ Svg>
Trate »
Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).
Complicado? Sí! ! Debido a la hora de elaborar la complejidad ruta, se recomienda utilizar el editor de SVG para crear gráficos complejos.