SVG Polygon

svg

This is part of the SVG Tutorial and exercises drawing a Polygon in SVG.

**[examples/js/svg_polygon_1.js](https://github.com/szabgab/perlmaven.com/tree/main/examples/js/svg_polygon_1.js)** ```js function draw_polygon() { var draw = SVG('polygon_1'); var width = 200; var height = 200; draw.size(width, height); var background = draw.rect(width, height).attr({ fill: '#FFF' }).stroke({ width: 1 });
var poly = draw.polygon([ [20, 10], [50, 20], [130, 100], [70, 140] ]);
poly.attr({ 'fill' : '#456789' });

} draw_polygon();



A polygon is very similar to a [Polyline](/svg-polyline), but it is a closed
shape. The last point in the list of points is connected back to the first point.

In this example we provided 4 points and got some strange shape.

Other pages

SVG (Scalable Vector Graphics) Tutorial and Exercises

Author

Gabor Szabo (szabgab) Gabor Szabo