SVG - Polyline

Card Puncher Data Processing

About

en-US/docs/Web/SVG/Element/polyline

Syntax

<polyline 
  points="series of x y coordinates (separated optionally by a comma)"
  stroke="lightBlue" 
  fill="transparent" 
  stroke-width="1"/>

Example

<svg width="300px" viewBox="0 0 90 40" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <polyline 
      points="60,10 65,20 70,15 75,30 80,25"
      stroke="lightBlue" 
      fill="transparent" 
      stroke-width="1"/>

  <!-- Points Representation-->
  <circle cx="60" cy="10" r="2" fill="red"/>
  <circle cx="65" cy="20" r="2" fill="red"/>
  <circle cx="70" cy="15" r="2" fill="red"/>
  <circle cx="75" cy="30" r="2" fill="red"/>
  <circle cx="80" cy="25" r="2" fill="red"/>
</svg>





Discover More
Card Puncher Data Processing
SVG - Marker (arrowheads or polymarkers)

The element defines the graphics that is to be used for drawing: arrowheads or polymarkers on a given path, line, polyline or polygon element. Element/marker...
Card Puncher Data Processing
SVG - Path

in Svg. Path is the generic element to define a shape. polylines circletry the code The shape of a path element is defined by one attribute: d that contains a suite of sequence that is defined...
Card Puncher Data Processing
SVG - Shape and Path

The representation of geometric object (shape) in svg. They are in the grammar. You need to use the path element to create them



Share this page:
Follow us:
Task Runner