Search for '{{search_term}}'

SVG Polygon

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

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

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' });

A polygon is very similar to a 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.


In the comments, please wrap your code snippets within <pre> </pre> tags and use spaces for indentation.
comments powered by Disqus