SVG - Ruta

El elemento <path> se utiliza para dibujar líneas rectas conectadas.

Declaración

A continuación se muestra la declaración de sintaxis de <path>elemento. Solo mostramos los atributos principales.

<path
   d="data" >  
</path>

Atributos

No Señor.	Nombre y descripción
1	d - datos de ruta, generalmente un conjunto de comandos como moveto, lineto, etc.

El elemento <path> se utiliza para definir cualquier ruta. El elemento Path utiliza datos de Path que se componen de varios comandos. Los comandos se comportan como una punta de lápiz o un puntero se mueve para dibujar un camino.

No Señor.	Comando y descripción
1	M - moveto - moverse de un punto a otro.
2	L - lineto - crear una línea.
3	H - línea horizontal para - crear una línea horizontal.
4	V - línea vertical para - crear una línea vertical.
5	C - curva para - crear una curva.
6	S - curva suave para - crear una curva suave.
7	Q - curva de Bézier cuadrática: crea una curva de Bézier cuadrática.
8	T - curva Bézier cuadrática suave para - crear una curva Bézier cuadrática suave
9	A - Arco elíptico: crea un arco elíptico.
10	Z - closepath - cierra el camino.

Como los comandos anteriores están en mayúsculas, estos representan la ruta absoluta. En caso de que se usen sus comandos en minúsculas, entonces se usa la ruta relativa.

Ejemplo

testSVG.htm

<html>
   <title>SVG Path</title>
   <body>
   
      <h1>Sample SVG Path Image</h1>
      
      <svg width="570" height="320">
         <g>
            <text x="0" y="10" fill="black" >Path #1: Without opacity.</text>
            
            <path d="M 100 100 L 300 100 L 200 300 z" 
            stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path>
         </g> 
      </svg>
   
   </body>
</html>

En el ejemplo anterior, en la primera forma, M 100 100 mueve el puntero de dibujo a (100,100), L 300100 dibuja una línea desde (100,100) a (300,100), L 200300 dibuja una línea desde (300,100) a (200,300) yz cierra el camino.

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.

Camino con opacidad

<html>
   <title>SVG Path</title>
   <body>
      
      <h1>Sample SVG Path Image</h1>
      
      <svg width="800" height="800"> 
         <g>
            <text x="0" y="15" fill="black" >Path #2: With opacity </text>
            
            <path d="M 100 100 L 300 100 L 200 300 z"
            style="fill:rgb(121,0,121);stroke-width:3;
            stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path>
         </g>
      </svg>
   
   </body>
</html>

Salida

↰ Previous page