Tutorial 7:

Tessalate: Using Patterns

In this tutorial, we are going to discuss how we generate an svg image, and use that image to fill another image's background. This code was written as an example for tesselation for a question which came up in the svg-developer discussion on Yahoo in 2001.

#!/usr/bin/perl -w

If our ISP does not have SVG.pm and we installed it locally, then we point to the module location and to the location of the SVG/ directory where the module resources live. In this particular case, my ISP does not support SVG (this is an inexpensive hosted service) so I explicitly point to the SVG.pm and SVG/*.pm modules which are located one directory up from where the script is being run.

BEGIN {
  push @INC , '../';  
  push @INC , '../SVG';
}

use strict;

use SVG;
my $svg = SVG->new(width=>"100%", height=>"100%");

We are going to generate two triangle images, overlap them, and use them as the basis for the fill pattern for the broken-window polygon.

my $g = $svg->group(style=>{"fill-rule"=>"evenodd","stroke-linejoin"=>"round", "stroke-linecap"=>"round"});

Define definition 1

my $d1 = $g->defs();
my $path = $svg->get_path(-type=>"path", x=>[0,90,60], y=>[0,60,90], -closed=>1);
my $d1g1p = $d1->group(id=>"Tess0p")->path(%$path);

my $d1g0 = $d1->group( id=>"Tess0", fill=>"rgb(255,255,0)", stroke=>"none")->use(-href=>"#Tess0p");

my $d1g1 = $d1->group(id=>"Tess1", fill=>"none", stroke=>"rgb(0,0,0)", "stroke-width"=>"2.413")->use(-href=>"#Tess0p");
$path = $svg->get_path(-type=>"path", x=>[15,75,50], y=>[15,50,75], -closed=>1);
my $d1g2p = $d1->group( id=>"Tess2p")->path(%$path);

my $d1g2 = $d1->group(id=>"Tess2", fill=>"rgb(255,170,255)", stroke=>"none")->use(-href=>"#Tess2p");

my $d1g3 = $d1->group( id=>"Tess3", 
                       fill=>"none", 
                       stroke=>"rgb(0,0,0)", 
                       "stroke-width"=>"2.413")
              ->use(-href=>"#Tess2p");

my $d2p2 = $g->defs()->
               pattern(id=>"TessPattern",
               patternUnits=>"userSpaceOnUse", x=>"0", y=>"0",
               width=>"100", height=>"100", viewBox=>"0 0 100 100",
               overflow=>"visible");

We create 4 groups and each employs group uses a predefinde group by calling by that group's ID.

$d2p2->group()->use(-href=>"#Tess0");
$d2p2->group()->use(-href=>"#Tess1");				
$d2p2->group()->use(-href=>"#Tess2");
$d2p2->group()->use(-href=>"#Tess3");

$svg->comment('Now let us define the polygon with the fill inside it refered to by url reference');

Define the container image. We just use a polygon here for coolness. This could have just as easily been:

$svg->rect(x=>"100",y=>"200",width="100",height=>"100",fill=>"url(#TessPattern)", 
        stroke=>"black");