SVG => Polilínea

Sintaxis

<polyline points="10,5 25,15 20,10" />

Parámetros

Parámetro	Detalles
puntos	El atributo de puntos define una lista de puntos. Cada punto está definido por las coordenadas ax y ay en el sistema de coordenadas del usuario.
anchura del trazo	Ancho de carrera
opacidad al golpe	Opacidad del trazo
trazo de trazo	(Opcional) Especifica el patrón de guión para el trazo
trazo de línea	(Opcional) Especifica si el final de la línea debe estar al ras, redondo o cuadrado ("tope" (predeterminado) / "redondo" / "cuadrado")
línea de trazo unido	(Opcional) Especifica cómo se deben unir los segmentos de línea: a inglete, redondeado o biselado ("mitre" (predeterminado) / "redondo" / "biselado")
golpe-miterlimit	(Opcional) Especifica la dimensión máxima de una mitra. Las combinaciones de ingletes que superan este límite se convierten en una combinación de bisel. Predeterminado = "4"

SVG incluyendo una polilínea

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="10,5 25,15 20,10" />
</svg>

Polilíneas con líneas alternativas, casquetes y miterlimits

<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
  
      <text x="320" y="20">Default drawing stroke</text>
  
      <g transform="translate(0,150)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
  
      <text x="320" y="20">stroke-linecap="butt" (default)</text>
      <text x="320" y="40">stroke-linejoin="miter"(default)</text>
      <text x="320" y="60">stroke-miterlimit="2"</text>
  </g>

  <g transform="translate(0,300)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
  
      <text x="320" y="20">stroke-linecap="round" </text>
      <text x="320" y="40">stroke-linejoin="round" </text>

  </g>
  <g transform="translate(0,450)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
  
      <text x="320" y="20">stroke-linecap="square"</text>
      <text x="320" y="40">stroke-linejoin="bevel"</text>
  </g>
  
</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

SVG
Polilínea

Buscar..

Sintaxis

Parámetros

SVG incluyendo una polilínea

Polilíneas con líneas alternativas, casquetes y miterlimits